【簡単デプロイ】nowを使って簡単に自分のポートフォリオを公開する
こんにちは、pavです。 みなさん確定申告終えましたか?
3/15が締め切りなので、まだやってないとかいう人はいないと思います。
僕は普段業務でバックエンド寄りの開発 + PjMをしてるんですが、最近フロントエンドをしっかり勉強しないとまずいなという気持ちになってきました。
なので、勉強がてらポートフォリオサイトを作成することにしました。
いつも勉強する時に、初期構成をモリモリにしすぎて普通に挫折したり頓挫することが多いです。 なので今回は学びたい技術にフォーカスして、作りきること を目標にしました。
今回使う技術は React + Redux + TypeScript です。
まあここまで書いておいて残念ながら、フロント周りの話は今回一切出てきません。
また別の記事で書こうと思います。
・目次
webサイトを公開するに当たってnowを使う
このブログもそうですが、作ったものを公開する時のスキームとか手順ってめっちゃ重要だと思ってます。 会社内での開発はリリースすることが前提なので、とくに問題ないですが…
個人で開発を行なうということはいかに「リリース作業が簡単か」ということが、継続にも繋がってきます。
以前は、高機能ホスティングで有名な netlify
なんかを使って github pagesでブログ書いてたりもしたんですが結局運用が面倒臭くなってはてなに課金したんですよね。
Netlify: All-in-one platform for automating modern web projects.
今回はどうせだから新しい技術とか面白そうなものに触れてみようと思って、 now
を触ってみることにしました。
普通に、ポップじゃないウェブサイトがめっちゃ好きです。厨二病なので。
The Global Serverless Platform
まあ、多分グーグル翻訳にかけると「グローバルサーバレスプラットフォーム」とか返ってきそうなわかりやすいキャッチです。 Globalって単語が特に好きです。
Our mission is to make cloud computing accessible to everyone.
かっこいいですね、誰しもがクラウドコンピューティングを利用できることがミッション。最高だ。
nowの初期設定
nowを初期設定していきます。
まず now を入れる。
❯ npm i -g now
nowコマンド打つと普通に deployされて焦る。普通に。困る。
新規アプリの作成
まあ、今回はreact-appを作るって言ったんで、 create-react-app
にしておきますね。
now init
しましょう。
❯ now init > Select example: Abort apollo bash ❯ create-react-app docz express express-twitter-dreamify gatsby go go-image-to-ascii gridsome html-minifier mdx-deck mdx-deck-advanced monorepo (Move up and down to reveal more choices)
create-react-app
を選択したら、 ディレクトリ作成が完了しました。
> Select example: create-react-app > Success! Initialized "create-react-app" example in ~/src/github.com/paveg/create-react-app. To deploy, `cd create-react-app` and run `now`.
appルートディレクトリに移動しておきます。
❯ cd create-react-app
うっかりデプロイできる
すごいんですよ、うっかり LJK; now
ってコマンド叩くとデプロイされます。
~/src/github.com/paveg/create-react-app ❯ now > Deploying ~/src/github.com/paveg/create-react-app under pavegy > Using project my-react-app > https://my-react-app-2dy554b80.now.sh [v2] [in clipboard] [3s] ┌ package.json Ready [1m] ├── asset-manifest.json (779B) ├── favicon.ico (3.78KB) ├── index.html (2.01KB) ├── manifest.json (306B) ├── precache-manifest.403868912749a458d8d1270e82ce54d6.js (606B) ├── service-worker.js (1.02KB) ├── static/css/main.a3566127.chunk.css (1.07KB) ├── static/css/main.a3566127.chunk.css.map (2.91KB) ├── static/js/main.7a406d4a.chunk.js (1.31KB) ├── static/js/main.7a406d4a.chunk.js.map (7.17KB) ├── static/js/runtime~main.229c360f.js (1.47KB) ├── static/js/runtime~main.229c360f.js.map (7.81KB) ├── static/media/logo.5d5d9eef.svg (2.61KB) ├── static/js/1.9a03d35e.chunk.js (117.57KB) └── static/js/1.9a03d35e.chunk.js.map (337.32KB) > Success! Deployment ready [1m]
まあ、LJKでもなんでもないんですけど。
エイリアス貼る
zeit
をそのまま使ってると project_name - hash
でurlが決まるんですよね。
ドメインもzeitで買えたりはするんですけど、 ぶっちゃけ portfolioで集客して アフィリエイトとかそういうのアレじゃないですか。
面倒臭くないですか?まあ俺は面倒臭いんですけど…
そこでエイリアス機能です。俺みたいな面倒臭がりにぴったしなんですよね。
❯ now ln pavlog # now alias pavlog > Assigning alias pavlog to deployment portfolio-jc530tm8h.now.sh > Success! pavlog.now.sh now points to portfolio-jc530tm8h.now.sh [4s]
ln or aliasコマンドでエイリアスを貼れます。
https://pavlog.now.sh/ (作りかけのサイトです)
これはすげえや。
now、まずかっこいいし。 俺もnowになりたい…
まとめ
〜なう
という死語を叩くだけで簡単にデプロイできる。
最初は真面目に書いていたんですが、久しぶりに家でお酒飲んでしまってそれどころじゃありませんでした。
あ、でも now は本当に便利だと思うのでぜひ使って見てください。 ブルーグリーンデプロイとかできるようなので。
寝ます。