こんにちは、KOUKIです。
Go言語でショッピング関連のAPIを作成しました。
また、フロントエンド側では、Admin画面とAmbassador画面を実装しています。
今回から、NextJSでCheckout画面の作成に入ります。
尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!
事前準備
ファイル
1 2 |
touch Dockerfile-nextjs-checkout touch next-checkout/tsconfig.json |
NextJSプロジェクトの作成
NextJSプロジェクトを以下の手順で作成しましょう。
- NextJSプロジェクトを作成
- NextJS用のDockerfileを作成
- docker-compose.ymlにサービスとして追加
- ビルドして起動
NextJSプロジェクトを作成
NextJSのプロジェクトを作成するには、NodeJSが必要のようです。※ Set up
以下の記事にある通り、ローカル環境にNodeJSをインストールしましょう。
インストールが完了したら、下記のコマンドを実行します。
1 2 |
# Reactプロジェクトを作成 npx create-next-app next-checkout |
コマンドが成功したら、カレントディレクトリに「next-checkout」ディレクトリが生成されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$ tree -I node_modules . ├── Dockerfile ├── Dockerfile-react-admin ├── Dockerfile-react-ambassador ├── Dockerfile-nextjs-checkout ├── Makefile ├── README.md ├── docker-compose.yml ├── go.mod ├── go.sum ├── main.go ├── next-checkout <<<<<<<<<<<<<<< │ ├── README.md │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── api │ │ │ └── hello.js │ │ └── index.js │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ └── styles │ ├── Home.module.css │ └── globals.css ├── react-admin ├── react-ambassador └── src |
NextJS用のDockerfileを作成
CheckoutのDockerfileを用意します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# Dockerfile-nextjs-checkout FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] ENV PROJECT /next-checkout WORKDIR ${PROJECT} RUN apk update ADD ${PROJECT}/package.json ${PROJECT} RUN npm install |
docker-compose.ymlにサービスとして追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# docker-compose.yml version: "3.3" services: .... checkout: build: context: . dockerfile: "./Dockerfile-nextjs-checkout" volumes: - ./next-checkout:/next-checkout command: > sh -c "npm run dev" ports: - "5000:3000" |
airの設定変更
Goのairを使ってホットリロード実現しているのですが、NextJSプロジェクトを監視対象に含めるとDockerの起動が遅くなるので、監視対象外にしておきます。
1 2 3 4 5 6 |
# .air.toml [build] ... # Ignore these filename extensions or directories. exclude_dir = ["assets", "tmp", "vendor", "react-admin", "react-ambassador", "next-checkout"] |
TypeScriptの準備
TypeScriptが使えるように準備しましょう。
1 2 3 4 5 |
cd next-checkout/ npm install --save-dev typescript @types/react mv pages/index.js pages/index.tsx rm -rf pages/api rm pages/_app.js |
npm installを実行後、tsconfig.jsonファイルは、以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] } |
ビルドして起動
コンテナをビルドして、起動します。
1 2 3 |
# ビルド docker-compose build checkout docker-compose up checkout |
コンテナが立ち上がったら、ブラウザから「http://localhost:5000」へアクセスしてください。

上記の画面が出てきたら成功です。
次回
次回は、テンプレートを作成しましょう。
記事まとめ
参考書籍
ソースコード
ここまで実装したソースコードを下記に記載します。
Dockerfile-nextjs-checkout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# Dockerfile-nextjs-checkout FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] ENV PROJECT /next-checkout WORKDIR ${PROJECT} RUN apk update ADD ${PROJECT}/package.json ${PROJECT} RUN npm install |
docker-compose.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
# docker-compose.yml version: "3.3" services: backend: # docker-composeファイルと同階層のDockerfileをビルド build: . ports: # ローカル:Docker - 8000:3000 # DockerとローカルのFSをマウント volumes: - .:/app # dbを先に起動させる # ただし、初回起動時はDBの準備に手間取るので、コネクトに失敗する # 可能性がある depends_on: - db - redis db: image: mysql:5.7.22 # restart: always environment: MYSQL_DATABASE: ambassador MYSQL_USER: admin MYSQL_PASSWORD: admin MYSQL_ROOT_PASSWORD: root # ローカルに.dbdataを作成し、dbコンテナとFSをマウントする volumes: - .dbdata:/var/lib/mysql ports: - 33066:3306 redis: image: redis:latest ports: - 6379:6379 smtp: image: mailhog/mailhog ports: - "1025:1025" - "8025:8025" admin: build: context: . dockerfile: "./Dockerfile-react-admin" volumes: - ./react-admin:/react-admin command: > sh -c "yarn start" ports: - "3000:3000" ambassador: build: context: . dockerfile: "./Dockerfile-react-ambassador" volumes: - ./react-ambassador:/react-ambassador command: > sh -c "yarn start" ports: - "4000:3000" checkout: build: context: . dockerfile: "./Dockerfile-nextjs-checkout" volumes: - ./next-checkout:/next-checkout command: > sh -c "npm run dev" ports: - "5000:3000" |
.air.toml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
# .air.toml # Config file for [Air](https://github.com/cosmtrek/air) in TOML format # Working directory # . or absolute path, please note that the directories following must be under root. root = "." tmp_dir = "tmp" [build] # Just plain old shell command. You could use `make` as well. cmd = "go build -o ./tmp/main ." # Binary file yields from `cmd`. bin = "tmp/main" # Customize binary. full_bin = "APP_ENV=dev APP_USER=air ./tmp/main" # Watch these filename extensions. include_ext = ["go", "tpl", "tmpl", "html"] # Ignore these filename extensions or directories. exclude_dir = ["assets", "tmp", "vendor", "react-admin", "react-ambassador", "next-checkout"] # Watch these directories if you specified. include_dir = [] # Exclude files. exclude_file = [] # This log file places in your tmp_dir. log = "air.log" # It's not necessary to trigger build each time file changes if it's too frequent. delay = 1000 # ms # Stop running old binary when build errors occur. stop_on_error = true # Send Interrupt signal before killing process (windows does not support this feature) send_interrupt = false # Delay after sending Interrupt signal kill_delay = 500 # ms [log] # Show log time time = false [color] # Customize each part's color. If no color found, use the raw app log. main = "magenta" watcher = "cyan" build = "yellow" runner = "green" [misc] # Delete tmp directory on exit clean_on_exit = true |
tsconfig.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] } |
コメントを残す
コメントを投稿するにはログインしてください。