はじめに
普段はバックエンドがメイン。
業務でのフロントエンドはVueが少し、Reactはプライベートでちょっと触ったことあるレベル。
Reactができる方が今後の案件の幅も広がりそうなので、本格的に物作って勉強を始めようと思う。
やりたいこと
Next.js公式のチュートリアルをDocker上でやりたい！
構築手順
ディレクトリ構成
(root)
└- Dockerfile
└- compose.yml
Dockerfile
FROM node:18.17-alpine
WORKDIR /app
compose.yml
services:
app:
build:
context: .
tty: true
volumes:
- ./src:/app
environment:
- WATCHPACK_POLLING=true
command: sh -c "npm run dev"
ports:
- "3000:3000"
ターミナルで以下コマンド実行
% docker compose run --rm app sh -c 'npx create-next-app@latest nextjs-tutorial --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"'
実行すると・・・
[+] Creating 1/1
✔ Network nextjstutorial_default Cre... 0.0s
[+] Building 1.5s (6/6) FINISHED docker:desktop-linux
=> [app internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 111B 0.0s
=> [app internal] load metadata for docker.io/library/node:18.17-alpine 1.5s
=> [app internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [app 1/2] FROM docker.io/library/node:18.17-alpine@sha256:3482a20c97e 0.0s
=> CACHED [app 2/2] WORKDIR /app 0.0s
=> [app] exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:5e3535a68f07f3878626cedb524d3da85f55f12337615 0.0s
=> => naming to docker.io/library/nextjstutorial-app 0.0s
Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y) y
Creating a new Next.js app in /app/nextjs-tutorial.
Downloading files from repo https://github.com/vercel/next-learn/tree/main/basics/learn-starter. This might take a moment.
Installing packages. This might take a couple of minutes.
added 22 packages, and audited 23 packages in 8s
3 packages are looking for funding
run `npm fund` for details
found **0** vulnerabilities
Success! Created nextjs-tutorial at /app/nextjs-tutorial
Inside that directory, you can run several commands:
npm run dev
Starts the development server.
npm run build
Builds the app for production.
npm start
Runs the built app in production mode.
We suggest that you begin by typing:
cd nextjs-tutorial
npm run dev
npm notice
npm notice New major version of npm available! 9.6.7 -> 10.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.7.0
npm notice Run npm install -g npm@10.7.0 to update!
npm notice
コンテナが実行され、コンテナ上にNext.jsアプリが作成された。
コンテナを起動してみる。
% docker compose up
[+] Running 0/0
⠋ Container nextjstutorial-app-1 Cre... 0.0s
Attaching to app-1
app-1 | npm ERR! code ENOENT
app-1 | npm ERR! syscall open
app-1 | npm ERR! path /app/package.json
app-1 | npm ERR! errno -2
app-1 | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
app-1 | npm ERR! enoent This is related to npm not being able to find a file.
app-1 | npm ERR! enoent
app-1 |
app-1 | npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-05-07T13_52_15_873Z-debug-0.log
app-1 |
app-1 exited with code 254
エラーになった。
エラーの内容を見てみると実行しているディレクトリがダメそう。
以下はこの時点でのディレクトリの中身。
srcフォルダは先ほどの docker compose run コマンド実行時に作成されたもの。
compose.yml の設定により./src と コンテナ上の /appが対応するので、DockerfileのWORKDIRをpackage.jsonのある /app/nextjs-tutorial に変更。
再度ビルドして起動してみる。
% docker compose up -d --build
[+] Building 1.6s (6/6) FINISHED docker:desktop-linux
=> [app internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 127B 0.0s
=> [app internal] load metadata for docker.io/library/node:18.17-alpine 1.5s
=> [app internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [app 1/2] FROM docker.io/library/node:18.17-alpine@sha256:3482a20c97e 0.0s
=> CACHED [app 2/2] WORKDIR /app/nextjs-tutorial 0.0s
=> [app] exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:af4a3be857aaaa2c31bb86035f79040864d941febbb92 0.0s
=> => naming to docker.io/library/nextjstutorial-app 0.0s
[+] Running 1/1
✔ Container nextjstutorial-app-1 Sta... 0.1s
起動成功！
localhosst:3000へアクセスして確認してみる。
無事にサンプルアプリが表示された。
おわりに
Dockerfileやcompose.ymlはきっともっと良い構成があると思うが、今回はとりあえず動かせることを優先しました。
これから色々触っていきながら改良していきたいです。