こんにちは、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まとめ
参考書籍
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](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-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 |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。