[React]~Ambassador画面: React環境構築~

こんにちは、KOUKIです。

Go言語でショッピング関連のAPIを作成しました。

[golang]fiber API作成~まとめ~

フロントエンド側では、Admin画面とAmbassador画面の2種類があって、今回はAmbassador画面の環境構築を行います。※Admin画面は先に実装したので、環境構築の順序はAdmin -> Ambassadorになっています

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

[React/NextJS]~画面開発まとめ~

<目次>

事前準備

ファイル

touch Dockerfile-react-ambassador

1	touch Dockerfile-react-ambassador

Reactプロジェクトの作成

Reactプロジェクトを以下の手順で作成しましょう。

Reactプロジェクトを作成
React用のDockerfileを作成
docker-compose.ymlにサービスとして追加
ビルドして起動

Reactプロジェクトを作成

以下の記事にある通り、ローカル環境にReactをインストールしましょう。

React ~基礎編~ 事前準備

インストールが完了したら、下記のコマンドを実行します。

# Reactプロジェクトを作成
npx create-react-app react-ambassador --template typescript

1 2	# Reactプロジェクトを作成 npx create-react-app react-ambassador --template typescript

コマンドが成功したら、カレンとディレクトリに「react-ambassador」ディレクトリが生成されます。

.
├── Dockerfile
├── Dockerfile-react-admin
├── Dockerfile-react-ambassador
├── Makefile
├── README.md
├── docker-compose.yml
├── go.mod
├── go.sum
├── main.go
├── react-admin
├── react-ambassador
│   ├── README.md
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── src
│   └── yarn.lock
├── src
└── tmp

├── Dockerfile

├── Dockerfile-react-admin

├── Dockerfile-react-ambassador

├── Makefile

├── README.md

├── docker-compose.yml

├── go.mod

├── go.sum

├── main.go

├── react-admin

├── react-ambassador

│ ├── README.md

│ ├── node_modules

│ ├── package.json

│ ├── public

│ ├── src

│ └── yarn.lock

├── src

└── tmp

React用のDockerfileを作成

AmbassadorのDockerfileを用意します。

# Dockerfile-react-ambassador
FROM node:14.9.0-alpine3.10

CMD ["/bin/sh"]

ENV PROJECT /react-ambassador

WORKDIR ${PROJECT}

RUN apk update && \
    npm install -g create-react-app

ADD ${PROJECT}/package.json ${PROJECT}

RUN npm install

# Dockerfile-react-ambassador

FROM node:14.9.0-alpine3.10

CMD ["/bin/sh"]

ENV PROJECT /react-ambassador

WORKDIR ${PROJECT}

RUN apk update && \

npm install -g create-react-app

ADD ${PROJECT}/package.json ${PROJECT}

RUN npm install

docker-compose.ymlにサービスとして追加

# docker-compose.yml
version: "3.3"
...

  ambassador:
    build:
      context: .
      dockerfile: "./Dockerfile-react-ambassador"
    volumes:
      - ./react-ambassador:/react-ambassador
    command: >
      sh -c "yarn start"
    ports:
      - "4000:3000"

# docker-compose.yml

version: "3.3"

...

ambassador:

build:

context: .

dockerfile: "./Dockerfile-react-ambassador"

volumes:

- ./react-ambassador:/react-ambassador

command: >

sh -c "yarn start"

ports:

- "4000:3000"

airの設定変更

Goのairを使ってホットリロード実現しているのですが、reactプロジェクトも監視対象にするとDockerの起動が遅くなるので、監視対象外にしておきます。

# .air.toml

[build]
...
# Ignore these filename extensions or directories.
exclude_dir = ["assets", "tmp", "vendor", "react-admin", "react-ambassador"]

# .air.toml

[build]

...

# Ignore these filename extensions or directories.

exclude_dir = ["assets", "tmp", "vendor", "react-admin", "react-ambassador"]

[golang]Dockerでfiber API環境を構築しよう3! ~Live Reloading~

ビルドして起動

コンテナをビルドして、起動します。

# ビルド
docker-compose build ambassador
docker-compose up ambassador

# ビルド

docker-compose build ambassador

docker-compose up ambassador

コンテナが立ち上がったら、ブラウザから「http://localhost:4000」へアクセスしてみましょう。

上記の画面が出てきたら成功です。

次回

次回は、ダッシュボードを作成しましょう。

[React]~Ambassador画面1: Top画面の作成~

Reactまとめ

[React/NextJS]~画面開発まとめ~

React~記事まとめ~

参考書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

React.js＆Next.js超入門第2版【電子書籍】[ 掌田津耶乃 ]
価格：2970円 (2021/6/26時点)

楽天で購入

ソースコード

ここまで実装したソースコードを下記に記載します。

Dockerfile-react-ambassador

# Dockerfile-react-ambassador
FROM node:14.9.0-alpine3.10

CMD ["/bin/sh"]

ENV PROJECT /react-ambassador

WORKDIR ${PROJECT}

RUN apk update && \
    npm install -g create-react-app

ADD ${PROJECT}/package.json ${PROJECT}

RUN npm install

# Dockerfile-react-ambassador

FROM node:14.9.0-alpine3.10

CMD ["/bin/sh"]

ENV PROJECT /react-ambassador

WORKDIR ${PROJECT}

RUN apk update && \

npm install -g create-react-app

ADD ${PROJECT}/package.json ${PROJECT}

RUN npm install

docker-compose.yml

# 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"

# 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"

.air.toml

# .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"]
# 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

# .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"]

# 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

月	火	水	木	金	土	日
						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

[React]~Ambassador画面: React環境構築~

事前準備

ファイル

Reactプロジェクトの作成

Reactプロジェクトを作成

React用のDockerfileを作成

docker-compose.ymlにサービスとして追加

airの設定変更

ビルドして起動

次回

Reactまとめ

参考書籍

ソースコード

Dockerfile-react-ambassador

docker-compose.yml

.air.toml

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

事前準備

ファイル

Reactプロジェクトの作成

Reactプロジェクトを作成

React用のDockerfileを作成

docker-compose.ymlにサービスとして追加

airの設定変更

ビルドして起動

次回

Reactまとめ

参考書籍

ソースコード

Dockerfile-react-ambassador

docker-compose.yml

.air.toml

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

VueJSの環境構築

[Golang]GitHub REST APIを使って簡単なWebアプリケー…

TypeScriptでジェネリクス(Generics)を学ぼう!

[Golang]~MovieApp1: ルーティング処理を実証しよう!~

[Golang/React]Movie App ハンズオン開発記録です!

ReactでTodoアプリを作ろう2！

[golang]TCPサーバーを作ろう!

[Go言語]ginフレームワークでアプリ開発~Controllerのテスト編…

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル