试着使用Amplify发布React应用程序。

本地开发环境

搭建本地开发环境：创建文件夹结构

请按照以下结构创建

.
├── .git
├── frontend
│   └── ... Reactプロジェクトを作成する場所
├── docker-compose.yml
└── Dockerfile

本地开发环境建立：使用Docker-Compose进行构建。

请自行安装Docker DeskTop并执行以下命令。

docker-compose build

dockerfile
# Node.jsイメージを使用します。
FROM node:16.14.0

# 必要なパッケージをインストールします。
RUN apt-get update && apt-get install -y \
  curl \
  && rm -rf /var/lib/apt/lists/*

# Yarnをインストールします。
RUN curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.4
ENV PATH="/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:${PATH}"

version: '3'
services:
 frontend:
   container_name: GolfParkFront
   build:
     context: .
     dockerfile: Dockerfile
   ports:
     - "3000:3000"
   volumes:
     - ./frontend:/frontend
   #working_dir: "/frontend"
   command: sh -c 'cd frontend && yarn start'
   environment:
     - NODE_ENV=development

搭建本地开发环境：创建React项目

启动容器并进入容器中

• docker compose up -d

docker exec -it [container name] /bin/bash

进入容器后

• cd frontend

sh -c ‘yarn create react-app search-golf-app –template typescript’

创建React项目后，文件夹结构会如下所示。

.
├── .git
├── frontend
│   ├── public
│   │   └── ...
│   ├── src
│   │   └── ...
│   ├── .gitignore
│   ├── package.json
│   ├── README.md
│   ├── tsconfig.json
│   └── yarn.lock
├── docker-compose.yml
└── Dockerfile

确认动作

• docker compose up -d

ブラウザで localhost:3000

支持热重载功能

react-scripts start → WATCHPACK_POLLING=true react-scripts start

...
"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

Amplify準備公開

• githubアカウント作成 と 作成したプロジェクトをリポジトリに格納

AWSアカウントの作成

Amplify公開

在搜索框中查询

开始使用

选择Github

Github账号验证

我在修改Amplify.yml时遇到了一些困难（在个别配置上卡住了）。

version: 1
frontend:
  phases:
  # IMPORTANT - Please verify your build commands
    preBuild:
      commands:
        # ルートにReact プロジェクトはないため移動
        - cd frontend
        # デプロイ先にモジュールなどないため、package.json記載の依存モジュールをインストール
        - yarn install
    build:
      commands: 
        - 'npm run build'
  artifacts:
    # IMPORTANT - Please verify your build output directory
    # 'npm run build'の結果が frontend/build に出力されるため、そこの内容を公開する
    baseDirectory: ./frontend/build
    files:
      - '**/*'
  cache:
    paths: []

部署

总结。

我按照Techpit上的教材创建了示例应用程序并在Amplify上进行了部署。我选择在本地开发环境中使用Docker进行设置。我尝试改变文件夹的结构，但发现稍微改动一下就容易陷入困境。不过，只要熟练使用，我觉得Amplify是一个非常方便的服务。