こんにちは、KOUKIです。
Go言語でショッピング関連のAPIを作成しました。
今回からは、Reactでフロントエンドの実装に入ります。
Admin画面とAmbassador画面の2種類があって、今回はAdmin画面の環境構築を主に行います。
尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!
<目次>
事前準備
ファイルの作成
1 2 |
touch Dockerfile-react-admin touch .air.toml |
Reactプロジェクトの作成
Reactプロジェクトを以下の手順で作成しましょう。
- Reactプロジェクトを作成
- React用のDockerfileを作成
- docker-compose.ymlにサービスとして追加
- ビルドして起動
Reactプロジェクトを作成
以下の記事にある通り、ローカル環境にReactをインストールしましょう。
インストールが完了したら、下記のコマンドを実行します。
1 2 |
# Reactプロジェクトを作成 npx create-react-app react-admin --template typescript |
コマンドが成功したら、カレンとディレクトリに「react-admin」ディレクトリが生成されているはずです。
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 |
$ tree -L 2 . ├── Dockerfile ├── Dockerfile-react-admin ├── Makefile ├── README.md ├── docker-compose.yml ├── go.mod ├── go.sum ├── main.go ├── react-admin <<<<<<<<<<<<<<<< │ ├── README.md │ ├── node_modules │ ├── package.json │ ├── public │ ├── src │ └── yarn.lock ├── src │ ├── commands │ ├── controllers │ ├── database │ ├── internal │ ├── middleware │ ├── models │ └── routes └── tmp └── main |
React用のDockerfileを作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] ENV PROJECT /react-admin WORKDIR ${PROJECT} RUN apk update && \ npm install -g create-react-app 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 |
# docker-compose.yml version: "3.3" services: ... smtp: ... admin: build: context: . dockerfile: "./Dockerfile-react-admin" volumes: - ./react-admin:/react-admin command: > sh -c "yarn start" ports: - "3000:3000" |
ビルドして起動
コンテナをビルドして、起動します。
1 2 3 |
# ビルド docker-compose build admin docker-compose up |
コンテナが立ち上がったら、ブラウザから「http://localhost:3000」へアクセスしてみましょう。

上記の画面が出てきたら成功です。
Reactを追加したらコンテナの起動がめっちゃ遅くなった件
一つ困ったことがあります。コンテナの起動がかなり遅くなったことです。
ログを確認すると、「node_modules」が「air」に監視されていることがわかりました。
1 2 3 4 5 6 7 8 9 10 |
backend_1 | watching react-admin/node_modules/websocket-driver/lib/websocket backend_1 | watching react-admin/node_modules/websocket-driver/lib/websocket/driver backend_1 | watching react-admin/node_modules/websocket-driver/lib/websocket/driver/hybi backend_1 | watching react-admin/node_modules/websocket-extensions backend_1 | watching react-admin/node_modules/websocket-extensions/lib backend_1 | watching react-admin/node_modules/websocket-extensions/lib/pipeline backend_1 | watching react-admin/node_modules/whatwg-encoding backend_1 | watching react-admin/node_modules/whatwg-encoding/lib backend_1 | watching react-admin/node_modules/whatwg-fetch backend_1 | watching react-admin/node_modules/whatwg-fetch/dist |
「air」は、ディレクトリやファイルの変更が発生した時に、ホットリロード(自動更新)をしてくれる便利なツールなのですが、ディレクトリ構成が悪いので、余計なファイルまで監視されています。
これにより、コンテナの起動が遅くなっているようです。
設定ファイルの追加
事前準備で、ルートディレクトリに「.air.toml」を設置しました。このファイルは、ホットリロード機能を提供する「air」の設定ファイルです。
デフォルトでは、「この設定ファイル」が読み込まれるみたいですが、自分で設定を変更することができます。
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/node_modules"] # 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 |
ほとんどオリジナルと一緒なのですが、下記の設定だけ変更しています。
「exclude_dir = [“assets”, “tmp”, “vendor”, “react-admin/node_modules”]」
GoのDockerfileの修正
Dockerfileを以下のように修正してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# Dockerfile FROM golang:1.16 WORKDIR /app COPY go.mod . COPY go.sum . # airの設定ファイルをコピー COPY *air.tom . RUN go mod download COPY . . RUN curl -sSfL https://raw.githubusercontent.com/cosmtrek/air/master/install.sh | sh -s -- -b $(go env GOPATH)/bin CMD ["air"] |
airの設定ファイルをコピーする処理を追加しただけですが、これだけで設定が反映されるようになります。
backendサービスのビルド
コンテナの変更を反映するために、ビルドします。
1 |
docker-compose build backend |
これで、コンテナが迅速に立ち上がるようになったはずです。本当は、ディレクトリ構成やDockerfileのCOPYの変更などで対応できますが、設定ファイルの使い方を学んでおきたかったので、今回はこれで対処しました^^
次回
次回は、ダッシュボードを作成しましょう。
Reactまとめ
参考書籍
ソースコード
ここまで実装したソースコードを下記に記載します。
Dockerfile-react-admin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# Dockerfile-react-admin FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] ENV PROJECT /react-admin WORKDIR ${PROJECT} RUN apk update && \ npm install -g create-react-app 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 |
# 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" |
Dockerfile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
FROM golang:1.16 WORKDIR /app COPY go.mod . COPY go.sum . # airの設定ファイルをコピー COPY *air.tom . RUN go mod download COPY . . RUN curl -sSfL https://raw.githubusercontent.com/cosmtrek/air/master/install.sh | sh -s -- -b $(go env GOPATH)/bin CMD ["air"] |
.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/node_modules"] # 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 |
コメントを残す
コメントを投稿するにはログインしてください。