メインコンテンツまでスキップ

クライアント静的ホスティング

Frourio ではクライアントとサーバーを別々にデプロイすることができます。

以下のコマンドでクライアントがビルドされます:

npm install
npm run build:client

npm run start:client で起動するか out/ を参照するかはお好みでどうぞ。

以下は、一般的な静的ホスティングサービスの例です。 もちろん、ここに掲載されていないサービス（自分のサーバを含む）にもデプロイできますので、ぜひ試してみてください。

GitHub Pages​

Step 1. GitHub Actions Workflow を追加​

備考

プロジェクトの作成時に Static hosting service として GitHub Pages を選択していた場合は、Step 2 に進んでください！

プロジェクト作成時に GitHub Pages を選択していなかった場合は、以下の workflow を参考に、デプロイ用 workflow を追加してください。

.github/workflows/deploy-client.yml
.github/workflows/deploy-client.yml
name: Deploy client

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
      - run: |
          if test -n '${{ secrets.GH_PAGES_BASE_PATH }}'; then
            CLIENT_BASE_PATH='${{ secrets.GH_PAGES_BASE_PATH }}'
          else
            CLIENT_BASE_PATH="/$(echo '${{ github.repository }}' | awk -F '/' '{print $2}')"
          fi
          echo "CLIENT_BASE_PATH=$CLIENT_BASE_PATH" >> $GITHUB_ENV
      - uses: actions/cache@v2
        id: client-npm-cache
        with:
          path: 'node_modules'
          key: client-npm-${{ hashFiles('package-lock.json') }}
      - uses: actions/cache@v2
        id: server-npm-cache
        with:
          path: 'server/node_modules'
          key: server-npm-${{ hashFiles('server/package-lock.json') }}
      - run: npm install
        if: steps.client-npm-cache.outputs.cache-hit != 'true'
      - run: npm install --prefix server
        if: steps.server-npm-cache.outputs.cache-hit != 'true'
      - run: npm run build:client
        env:
          API_ORIGIN: ${{ secrets.API_ORIGIN }}
          API_BASE_PATH: ${{ secrets.API_BASE_PATH }}
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

Step 2. リポジトリに Secrets を追加​

以下の secrets を GitHub リポジトリに追加してください。

  • API_ORIGIN: API origin.
    e.g. https://api.my-frourio-app.example
  • API_BASE_PATH: API basepath.
    e.g. /api
  • GH_PAGES_BASE_PATH (Optional): Client hosting basepath.
    • If omitted, GitHub repository name will be used. This is because GitHub hosts Pages at github-username.github.io/repository-name with default settings.
    • You can also use custom domain. When doing so, it is needed to use that basename. Set this / to host your client from root routing.

Vercel​

  1. vercel.com にアクセスし、新しいプロジェクトを作成します。
  2. BUILD COMMAND に npm run build:client をセットします。
  3. 環境変数に API_BASE_PATH と API_ORIGIN を追加します。

Netlify​

  1. app.netlify.com にアクセスし、新しいプロジェクトを作成します。
  2. Site Settings > Build & Deploy を開き、
    a. Repository にリモートリポジトリをセットします
    b. Build command に npm run build:client をセットします
    c. Publish directory に out/ をセットします
  3. Site Settings > Build & Deploy > Environment を開き、
    環境変数に API_BASE_PATH と API_ORIGIN を追加します。