【Vue】GitHubActionsでビルド後にhtaccessを追加する方法。

VueにてGitHubActionsを使用してビルドしたファイルを本番環境にデプロイする方も多いと思います。

直接htaccessファイルを配置してもよいですが、なるべく避けたいですよね。
かといって、CIでビルドファイル生成されるわけで事前に配置しておくこともできないです。

そのため、ビルド後にhtaccessを追加する処理をGitHubActionsの工程に追加します。

今回は、その方法を記します。

GitHubActionsでビルド後にhtaccessを追加する方法

.htaccess.prodの作成

まず、プロジェクト直下に「.htaccess.prod」を作成します。
(package.jsonと同じ配下)

そして、内容を記述します。

【Vue】ビルド後、本番環境でリロードすると404エラーの対処法。

Vueをビルドして生成されたファイルを 本番環境に載せることが一般的だと思います。 SPAは、routerを使用して画面を書き換えているわけです。 ビルドして生成されたファイルは、index.htmlおよびassetのみですので ファイル...

hasethblog.com

2023.04.17

ファイル名は、.htaccess.prodとしましたが、
ビルド後にリネームをするので、ここでのファイル名に意味はありません。

ワークフロー(yamlファイル)にリネームの処理を追加

name: app
on:
  push:
    branches:
      - prod
jobs:
  deploy:
    runs-on: ubuntu-latest
    defaults:
     run:
      working-directory: ./
    steps:
       - name: Checkout v3
         uses: actions/checkout@v3
       ...ビルド
       - name: copy .htaccess
         run: cp -f .htaccess.prod ./dist/.htaccess

….ビルドは、割愛しています。
checkout後、buildしてdistフォルダが生成されます。
その後に、「.htaccess.prod」というファイルをdistフォルダへ移動、
かつファイル名を「.htaccess」に変更しています。

これにより、デプロイすると本番サーバの指定した場所に
「.htaccess」が設置されていることが確認できます。