Github+vite+amplify+react

目的

忘れがちなので、GithubからすぐにCI/CDできるホスティング整備手順。
さくっとフロントの検証アプリを作りたい時に。

Githubでリポジトリ追加

git clone

vite create

pnpm create vite ./

reactを選んでプロジェクト基本構成作成。

vite.config.ts編集

base: "./",を追記。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react()]
})

Vite + Amplifyへの手当て

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react()],
  define: {
    global: 'window',
  }
})

amplifyで対象レポジトリ追加

amplify.ymlのbaseDirectory修正

baseDirectory: /distへ変更。

manifest.webmanifestをpublic/に配置

manifest.webmanifest.json

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "読みやすいハッカーニュースアプリです。",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

pnpm

pnpm install \
@aws-amplify/ui-react \
@emotion/react \
@emotion/styled \
@fontsource/roboto \
@mui/icons-material \
@mui/material \
@mui/styled-engine-sc \
aws-amplify \
react \
react-dom \
styled-components

aws-exports.ts

aws-exports.jsをtsで扱うことになるが、aws-exports.tsは更新されず、aws-exports.jsが更新されるので、適宜マージする。

amplify.yml

version: 1
appRoot: './web'
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands: ['npm install --legacy-peer-deps', 'npm run build']
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: './dist/'
    files:
      - '**/*'
  cache:
    paths: ['./web/node_modules']

/web/srcにソースを配置する場合、こんな感じ。
appRootを追加しているが、使い方間違っているかも。