Docker で zeit nowのデプロイ環境とNext.jsの開発環境を作ったメモ

概要

• zeit nowのデフォルトのnext.jsを修正
• 2020 年初頭における Next.js をベースとしたフロントエンドの環境構築 を参考にTypeScriptの環境構築
• dockerを利用して環境を作っている
• storybookはできてない

now

zeit now へのデプロイを確認

• 事前に、zeit へ github 連携を行っている。
• コンテナに bin/bash.sh でログイン。以下のコマンドを実行してデプロイしてみる。

now login # メールを確認する。メールは https://zeit.co/account の画面から確認可能
now init # nextjsのデフォルトプロジェクトを作成
cd nextjs # initで作ったディレクトリに移動する
now # デプロイを行う。とりあえず、初期の状態でデプロイできることを確認

• このとき、/root/.local/share/now/ディレクトリに、config.json と auth.json が出来ているので、コンテナ外に保存しておく。認証用の情報
• nextjs フォルダに最初のファイルが出来ているので、コンテナ外に保存しておく。
• コンテナ作成時に、/root/.local/share/now/ディレクトリに先ほど保存したファイルを取り込むように Dockerfile を修正。
  • 毎回、now login しなくてもよいようになる。

整理前のソース

フォルダ構造変更

• src ファイル整理
• now devでローカルで確認できるように docker-compose.yml を修正

この時点のソース

react ts

環境構築

2020 年初頭における Next.js をベースとしたフロントエンドの環境構築 を参考に環境を作っていく。

この時点のソース

参考

now

dist now
設定なしでデプロイできる Zeit Now
Now でクラウドの複雑さから解放されよう、今すぐに
example
now deploy

next

2020 年初頭における Next.js をベースとしたフロントエンドの環境構築