はじめに
こちらは、ローカル環境側にNext.jsアプリケーションのソースコードを置いて、Dockerコンテナからローカル環境のコードを参照する方法ではなく(ボリュームマウントやバインドマウント)、直接Dockerコンテナ内でNext.jsアプリケーションを構築する記事になります。
ホスト環境
- Windows11
- WSL2
- Ubuntu20.04
- Docker Desktop
では、実際にコンテナ作成からデプロイまで確認していきたいと思います。
1. ローカル環境の詳細
ローカル環境のディレクトリ構成
Dockerfile
npx darete-next-appコマンドを直接Dockerfileに記述しています。オプションもすべて公式ドキュメントを参考に書いてます。`
FROM node:lts-alpine3.18
RUN apk update && apk add git vim curl
WORKDIR /app
RUN npx create-next-app@latest . \
--typescript --tailwind --eslint --app --src-dir \
--import-alias --use-npm
RUN git init
COPY .env /app/
COPY ./.vscode/launch.json /app/.vscode/
WORKDIR /
docker-compose.yml
今回はDBを使ってないのでdocker-compose.ymlを作成しなくても良いと思うのですが、今後DBコンテナとNext.jsコンテナを接続したアプリケーションを開発することを考慮して作りました。
version: "3"
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- 3000:3000
restart: always
tty: true
2. docker-composeコマンドでコンテナ起動
イメージのビルドとコンテナ起動
先述のDockerfileとdocker-compose.ymlファイルを使用してイメージのビルドとコンテナ作成、起動までを行います。
$ docker-compose up -d --build
コンテナ接続
dockerコンテナ内に入り、.envファイルがコピーされているか、実際にnpm run devでNext.jsアプリケーションが立ち上がるか確認を行います。コンテナ名はdocker psコマンドで確認できます。
$ docker exec -it <コンテナ名> sh
/app # ls -a
. .git next.config.js postcss.config.js tsconfig.json
.. .gitignore node_modules public
.env README.md package-lock.json src
.eslintrc.json next-env.d.ts package.json tailwind.config.js
/app # npm run dev
3. Dev ContainersからDockerコンテナに接続
VScodeのDev Containersを使用して、Dockerコンテナに対して接続を行います。
Remote Development拡張機能をインストールすればDev Containersも合わせてインストールされます。
次にVScode左下の><アイコンをクリックして、実行中にコンテナーにアタッチをクリックし、先程作成したDockerコンテナと接続して、Next.jsアプリケーションのコードを開きます。
4. Vercelにデプロイ
Vercelにデプロイするためのリポジトリを作成し、git remote add origin <リポジトリURL>でリポジトリを登録して、コンテナ内のNext.jsアプリケーションコードをGithubにpushします。
Vercelにデプロイする手順については、サバイバルTypeScriptさんの記事をご確認ください。
最後にちゃんとVercelにデプロイされているか確認します。
番外編: デバッグが出来るか
上記ののNext.jsのドキュメントを参考にlaunch.jsonの設定ファイルをそのままコピーし、ブレークポイントを設定してF5キーでサーバーを立ち上げてから http://localhost:3000にアクセスしたところ、ブレークポイントで停止していることが確認できました。
終わりに
最後まで記事をご覧いただきありがとうございました。
間違い等ありましたらご指摘いただけると幸いです
参考