個人の作業ログです
- Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること
作成
CRN でチュートリアルに沿ってアプリを作成
Next の getStaticProps 周りをマスターしてきた。作ってきたプロジェクトを動かす。
この記事を参考に
Dockerfile をかく
Node Version は以前 React を動かした
13.12.12.0-alpine
を使う
記事のコードは
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
Dockerfile を書く
FROM node:10
# Setting working directory. All the path will be relative to WORKDIR
WORKDIR /usr/src/app
# Installing dependencies
COPY package*.json ./
RUN npm install
# Copying source files
COPY . .
# Building app
RUN npm run build
# Running the app
CMD [ "npm", "start" ]
- となっている
- Node の Version を変えて書く。
FROM node:13.12.12.0-alpine
WORKDIR /usr/src/app
COPY package*json ./
RUN npm install
COPY . .
RUN npm run build
CMD [ 'npm', 'run', 'dev' ]
- 今回は PATH とかは必要ないのか？
Docker build して image を作成する
- 今作った Dockerfile からビルドする
docker build -t kaede0902/docker-nextjs .
Sending build context to Docker daemon 99.16MB
Step 1/7 : FROM node:13.12.12.0-alpine
manifest for node:13.12.12.0-alpine not found:
- あれ？ alpine がない, node@12 でいいか
Sending build context to Docker daemon 165.9MB
Step 1/7 : FROM node:12
---> 1fa6026dd8bb
Step 2/7 : WORKDIR /usr/src/app
---> Using cache
---> 1951ed5d38b0
Step 3/7 : COPY package*json ./
---> 69929aec19da
Step 4/7 : RUN npm install
---> Running in 03aa10e0801f
- 少し重くなったが、順調に動いている
info - Finalizing page optimization... [14/1853]
Page Size First Load JS
┌ ● / 632 B 69.6 kB
├ /_app 0 B 58.5 kB
├ ○ /404 309 B 58.8 kB
├ λ /api/hello 0 B 58.5 kB
└ ● /posts/[id] 445 B 69.4 kB
├ /posts/pre-rendering
└ /posts/ssg-ssr
+ First Load JS shared by all 58.5 kB
├ chunks/hogehogehogehoge.b1b405.js 10.3 kB
├ chunks/framework.cb05d5.js 39.9 kB
├ chunks/main.afa405.js 7.28 kB
├ chunks/pages/_app.5a16a1.js 294 B
├ chunks/webpack.e06743.js 751 B
└ css/hogehogehogehogehoge.css 259 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
Step 7/7 : CMD [ 'npm', 'run', 'dev' ]
---> Running in ahogeahoge
Removing intermediate container ahogeahoge
---> hogehoge1818
Successfully built hogehoge1818
Successfully tagged kaede0902/docker-nextjs:latest
- 無事にビルドできた！
Container を イメージで run する
docker run -d -p 3333:3000 <your_username>/docker-nextjs:latest
docker run -d -p 3333:3000 kaede0902/docker-nextjs:latest
youridyouridyourid
- さっきビルドしたイメージからコンテナを作成した。
- これで動いている？
うーん、Docker で動いている実感が湧かない...
とりあえずターミナルのどのペインでも npm run dev 走ってないし、これは Docker を使って動いているんだろう
まとめ
今回の手順としては
-
ローカルで CRN で作成、開発
-
Dockerfile を作成
- Node Version
- Docker コンテナでの作業ディレクトリ指定
- package*.json の Docker コンテナへのコピー
- コピーした Docker コンテナ内の package*.json を使って npm 依存関係 install
- 現在コンテナの全てをコピー、上書き？
- build して production を作る
- npm run dev でサーバーをスタートする
-
Docker build して Dockerイメージ を作成する
-
Docker イメージからコンテナを作成して port 番号を指定して起動する
-
localhost の指定番号をブラウザで確認
になる。
では念のために Docker events で今動いているコンテナをかくにん....
動いていない？？？？
CONTAINER ID NAME CPU % MEM USAGE / LIMIT MEM % NET I/O BLOCK I/O PIDS
- docker ps -a でプロセスを見る！！！
docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS
NAMES
4baeb6e08587 kaede0902/docker-nextjs:latest "docker-entrypoint.s…" 23 minutes ago Exited (2) 23 minutes ago
gifted_zhukovsky
c7f641e51856 kaede0902/node-web-app "docker-entrypoint.s…" 2 months ago Exited (137) 2 months ago
- VScode 統合ターミナルが動いてた
docker run -d -p 80:3000 kaede0902/docker-nextjs:latest
8c7abf96d0223173844524fb492078efd78f44a7fb867ebcb2f57ec00a4b09f4
docker: Error response from daemon: Ports are not available: listen tcp 0.0.0.0:80: bind: address already in use.
80 はだめ
docker log をみる
docker logs -f a79d015ebc5417e8e2104326e8014c9212c174720bf81a458e5c6b8002e32be1
/bin/sh: 1: [: npm,: unexpected operator
FROM node:12
WORKDIR /usr/src/app
COPY package*json ./
RUN npm install
COPY . .
RUN npm run build
CMD [ 'npm', 'start' ]
Dockerfile 修正
docker build -t kaede0902/docker-nextjs .
Successfully tagged kaede0902/docker-nextjs:latest
もう一度イメージのビルド
docker run -d -p 3333:3000 kaede0902/docker-nextjs:latest
これでも 3333 で動いてない
CMD [ 'npm', 'start' ]
もしやシングルクウェートだから
注釈
exec 形式は JSON 配列でパースされます。つまり、文字を囲むのはシングル・クォート(‘) ではなくダブル・クォート(”)を使う必要があります。
JS と違う！！！落とし穴だ！！！
Dockerfile を書き直して再度
Successfully built d07c2f0df820
Successfully tagged kaede0902/docker-nextjs:latest
docker run -d -p 3333:3000 kaede0902/docker-nextjs:latest
99529632c37190826d390abd38af4e49bee4875d8404e3cef996e3678f857c3c
![Screen Shot 2020-09-24 at 18.59.59.png]
(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243383/355b0b87-f38a-e7c2-24a0-846081edfd10.png)
動いたあ！