こんにちは、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」へアクセスしてください。
上記の画面が出てきたら成功です。
次回
次回は、テンプレートを作成しましょう。
記事まとめ
参考書籍
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1919737f.3a3d64cb.19197380.327d0987/?me_id=1278256&item_id=19902768&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F6041%2F2000009456041.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
ソースコード
ここまで実装したソースコードを下記に記載します。
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" ] } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。