asoview! TECH BLOG

アソビュー株式会社のテックブログ

Next.jsアプリをNowで公開する

アソビューAdvent Calendar 2019の20日目の記事になります。

フロントエンドエンジニアの野口です。 今日は、Next.jsアプリを最近話題のNowで公開する方法を紹介します。
ほんとに一瞬で公開できます。 ​

Next.jsとは

​ Reactで簡単にSSR(server side rendering)を可能とするフレームワークです。
SSRはもちろん、高速ページロードのための自動コードスプレティングやHMR(Hot Module Replacement)をサポートしたWebpackベースの開発環境などをデフォルトで用意してくれています。 ​

Nowとは

Nowは、Next.jsを開発しているZeit社が提供するPaasです。
Nowを使うことで非常に簡単にデプロイすることができます。 ​

Next.jsアプリを作成

​ まずはNext.jsアプリを作成します。

create-next-appを使うことで、簡単にアプリケーションの雛形を作成可能です。​
かなり多くのExamples(雛形)が用意されているので、用途に合わせて選ぶことができます。
next.js/examples at canary · zeit/next.js · GitHub

create-next-appを使わない場合でも、Reduxの設定など、単純なReactアプリとは少し異なる設定をしないと行けない時もあり、そんな時にここのExamplesはかなり参考になります。

  • アプリ作成 ​
npx create-next-app {app-name}
  • アプリ起動 ​
yarn dev

http://localhost:3000/にアクセスするとデフォルトで用意されているページを確認できます。 ​

Next.js デフォルト初期起動画面
nextjs prepared page

Nowで公開

​ さきほど作成したアプリを公開していきます。
CLIの場合と、ブラウザでポチポチ操作していく場合をそれぞれ紹介します。 ​

CLIの場合

  • Nowにサインアップ

まずは、こちらからNowにサインアップします。
Githubアカウントで登録できます。

  • Now CLIをインストール
npm i -g now
  • Now login

以下コマンドを実行し、サインアップ時に登録したメールアドレスを入力。

now login
> We sent an email to hoge@hoge.co.jp. Please follow the steps provided
  inside it and make sure the security code matches Gentle Tasmanian Devil.
  ⠦ Waiting for your confirmation

​ メールの認証を求められるので、届いたメールの認証ボタンを押します。 認証完了すると以下のメッセージが表示されます。 ​

✔ Email confirmed
> Congratulations! You are now logged in. In order to deploy something, run `now`.
  • Nowにデプロイ

これで準備は完了です。
あとは以下のコマンドを実行するだけでデプロイされます。

now
> Deploying ~/Documents/work/next-now-sample under {account name}
> Using project next-now-sample
...
> Ready! Deployment complete [2m]
- https://next-now-sample.now.sh

https://next-now-sample.now.shにアクセスするとNext.jsアプリが公開されているのを確認できます。 ​

GUIの場合

​ コマンドではなく、画面を操作するだけでもデプロイできます。

  • サインアップ

CLIと同じく、こちらからサインアップします。

  • Nowのセットアップ

デプロイ対象のリポジトリを選択。 ​

対象のリポジトリを選択
select target repository

  • テンプレートを選択

続いてテンプレートを選択します。今回の場合は、Next.jsを選択。

フレームワークを選択
select target framework

その後、プロジェクトネームを設定し、デプロイを実行。
しばらくすると、こんな感じでデプロイが完了します。

デプロイ完了画面
done deploy
​ ​ ボタンをぽちぽち押していくだけで簡単にデプロイできます。 ​ ​ ​

最後に

Nowは無料枠でいろいろできます。
個人的にいいなと思ったのは、カスタムドメインの設定。これも無料でできます。
デプロイも100/per dayなので十分です。

てっとり早くアプリを公開したいときにはかなりいい選択肢になるんじゃないかなと思います。

おしまい。