Nowでのデプロイが無料かつ制限無し(個人利用)になったので使い方を紹介

---

NowはZeit社が提供するPaaS(Platform as a Service)と言われるものです。

まぁ簡単に言えば自分で作ったサイトとかを誰でも見れるようにしてくれます。

PaaSで言ったらherokuとかが有名かもしれませんが、ハッキリ言います

Nowオススメです

ということで

実際にReactでサンプルプロジェクトを作成してNow上にデプロイする流れを紹介します。

また、GitHubのリポジトリと連携して、masterブランチにマージされたらデプロイ先の本番環境も自動で変更されるという実務向けな設定もやっていきたいと思います。

「デプロイ」と聞くとなんか苦手で体が拒否反応を起こす人もいるかもしれませんが、Nowはマジでめちゃくちゃ簡単なので安心してください。

え、どれくらい簡単かって？？

now

って3文字コマンド打つだけです。。。まじです。

Nowのメリット

まず初めに、Nowを使うと何が嬉しいのかをざっくりと紹介します。

個人利用の場合、制限無く無料で使える

この記事を書くキッカケにもなった部分ですね。

2020年4月9日より個人利用であれば制限無しで無料で使えるようになりました。

Zeit社のブログ記事はこちら


ポートフォリオサイトやローカルで勉強用に作ったReactやVueのプロジェクト等ガンガンデプロイしちゃって大丈夫ってことです。

とにかくデプロイが簡単

後述しますが、Nowでのデプロイはとにかく簡単です。

プロジェクトのルートディレクトリで now コマンドを実行するだけです。that’s allです。

(別途now CLIのインストールとZeitのアカウント登録はする必要あり)

デプロイの壁が低くなるのは本当に嬉しい＼( ‘ω’)／

GitHubとの連携が素敵

GitHubのリポジトリとの紐付けも超簡単です。

その他、GitLabとBitBucketにも対応してます。

これもこの後紹介します。

何より素敵なのが、ブランチをきってプルリクをあげた時点で、そのブランチ用のURLを発行してくれるという点です。

チームメンバーの動作確認がスーパー楽ちん！ありがとうZeitちゃん！

カスタムドメインも無料で可能

herokuの場合ドメインのカスタムはお金がかかりますがNowの場合は無料で可能です。

まじでポートフォリオはNowにデプロイしちゃいましょう。

サーバレスファンクションもホスティング可能

これは自分は試したことがないのですが、以下の言語に対応しています。

Node
Go
Python
Ruby

DBを持てるわけではないのでアプリケーションの全てをNowで管理は難しいですが、BFF(Backends For Frontends)のような役割を持たせることはできそうです。

Serverless Functionsに関する公式ドキュメントはこちら

では、以降で実際にデプロイのフローを紹介します。

Reactのプロジェクトを作成し、GitHubにpushする

今回はサンプルとしてReactのプロジェクトをデプロイしていきたいと思います。

適当なフォルダ配下で以下のコマンドを実行し、GitHub上にpushします。

この手順はいろんなサイトで解説があるので、もし分からない場合は調べてください。

Zeitのアカウント登録をする(登録してない場合)

登録済みの人はログインできることを確認してください。

以下のページからSignUpします。

https://zeit.co/signup

GitHub、GitLab、Bitbucketいずれかのアカウントがあれば認証させることが可能です。

特に迷うことはないと思います。

nowのCLIをインストールする

コマンドでデプロイする場合CLIが必要なのでインストールしていきます。

・npmの場合

・yarnの場合

上記はどこで実行しても大丈夫です。

次にCLIからログインできるか確認します。

メールアドレスの入力を求められるので、アドレスを入力してEnterを押すとターミナルが認証待ちの状態になります。

送信されたメールからVerifyボタンを押下するとターミナルが以下のようになるはずです。

以上でデプロイの準備が整いました！

nowコマンドでデプロイしてみる

ではお待ちかね。作成したプロジェクトのルートディレクトリで以下のコマンドを実行してみましょう。

何度も言いますがたったこれだけです。

質問されるので答えていきます。(Now CLI 17.1.1時点)

---

Set up and deploy “(プロジェクト階層)”? [Y/n]
　→Y
Which scope do you want to deploy to?
　→対象を選択(1つしか出てない人がほとんどだと思います)
Link to existing project? [y/N]
　→Now CLIの17以降では最初にnowコマンドを実行したこの時点で既存のnowプロジェクトとの連携設定もできるようになりました。今回はNを選択します。
What’s your project’s name?
　→nowプロジェクトの名称です。特に指定がない場合はそのままEnterを押しましょう。
In which directory is your code located?
　→そのままEnterを押します。
Auto-detected project settings (Create React App):
– Build Command: npm run build or react-scripts build
– Output Directory: build
– Development Command: react-scripts start
? Want to override the settings? [y/N]
　→package.jsonを読み込んでビルド等の設定を自動でやってくれます。特に変更がなければNを入力します。

---

もじもじしながら待ちます。



ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡•ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ

しばらく経つと以下のようなメッセージが表示され、デプロイが完了しURLが発行されたことが確認できます！

試しにアクセスすると確かに見れました。So Easy…

GitHubのリポジトリとの連携設定

１回だけデプロイするなら上記の手順でも良いんですが継続して開発する場合やチームで開発する場合はちょっと現実的ではないです。

Nowはリポジトリとの連携設定も簡単なのでやってみましょう。

まずはZeitにログインします。

上記の手順で１度デプロイしている場合、このようにプロジェクトができていると思います。

「Git Integrations →」を押下すると以下のようなページに遷移するので、対象のリポジトリ名を入力してSaveを押します。



GitHub ApplicationsにNowがインストールされていない場合はインストールする必要があります。


GitHub Applicationsの確認は以下からできます。
https://github.com/settings/installations/


Repository accessはAll repositoriesにしておいても良いかと思います。
(自分は最初に作成したリポジトリのみ指定しており、２つ目を作った際に連携されず時間を喰いました…)

※もしNowがGitHub Applicationsにインストールされていない場合は以下の手順でも確認できます。
※既にデプロイ済みなので実際にimportはしなくても良いです。既存のリポジトリからNowプロジェクトを新規作成する場合はこの手順でもできます。

たったこれだけで連携設定ができました。

確認するためにブランチをきってプルリクを上げてマージしてみましょう。

適当な名前でブランチをきります。

試しに以下のように修正してpushしてみます。

プルリクを作成すると以下のようにNowが自動でコメントしてきます。
今回のブランチ用の一時的なURLが作成されているので確認してみましょう。

たしかに修正が反映されています。

いやーすばらすぃー。ポチポチするだけでここまでやってくれます。

では、マージしてみましょう。

デプロイされているか最初のURLを開いてみると確かに自動で反映されています。

Nowのプロジェクトダッシュボードからもデプロイが確認できます。

初期設定的な部分を除き、慣れれば２回目以降はここまで５分くらいでいけてしまうので本当にお手軽です。

しかも使い放題。

使わない手はないですね。

さいごに

Nowを知らなかった人も知っていたけど使ったことなかった人もこの機会に是非使ってみてください！

お後がよろしいようで。

それでは！また！！