はじめに
viteでReactの環境を整えるところまでは順調にできたものの、いざgithub Pagesにデプロイしようとしたところでbuildしたものをどう扱えばいいか戸惑い、手が止まってしまいました。buildしたdistファイルをそのままコミットするわけにもいかず...。
そう思って少し調べたら、vite公式がgithub Actionsを使ってデプロイする方法をまとめてくれていました。優秀ですね。
せっかくなので、自分なりに行ったみちすじを残しておこうと思います。
どうしてうまくデプロイできないのか
どうして簡単にデプロイできないのかの理由は主にこの2つです。
問題1：distファイルをコミットしたくない
gitで管理しているものは、できれば開発に関係ないものはcommitしたくありません。
そのため、buildしたときに生成されるdistフォルダなどはcommitしたくありません。
同じような理由でnode_modulesフォルダなどは.gitignoreでcommitしないように管理しています。
ですが、Reactのようなbuildを前提としたものはbuildで生成されたものでなければ、github Pagesは正しく表示してくれません。
問題2：github PagesのURLにリポジトリ名が含まれる
gitHub PagesのURLは https://<ユーザー名>.github.io/<リポジトリ名>/ となっており、buildしたものをそのままデプロイしてもリポジトリ名の部分のbasepathがないhttps://<ユーザー名>.github.io/**.jsのURLを読み込むため正しくファイルが読み込めません。
では、どのように解決すればいいのでしょうか。
- github Actionsでpushしたときにdistファイルをデプロイしてもらう
- viteにbuildの生成物のパスを書き換えてもらう
この方法で簡単に、むしろ以前より楽にデプロイできました。
ここから解説します。
設定方法
1. vite.config.jsを設定する
viteでプロジェクトを作成したとき、できていたvite.config.jsですが、調べてみるとできることがいろいろあるようで超優秀でした。
今回はbasepathの設定のみ記載しますが、生成されるファイル名の設定やpublicディレクトリなどの細かい設定もでき自分好みにカスタマイズできたので、気になる方はご自身で調べてみてください。
修正前のvite.config.jsはこちら。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
defineConfigの中身を書き換えていきます。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
+ base: process.env.GITHUB_PAGES ? 'REPOSITORY_NAME' : './',
plugins: [react()],
})
basepathをgithubのときにリポジトリ名を設定するように修正しました。
2. github Actionsの設定
github Actionsの設定をしていきます。
githubのActionsページを開き、「New Workflow」ボタンを押下します。
次に「set up a workflow yourself」を押下すると設定用のファイルが作成されます。
設定ファイルの内容はvite公式ドキュメントの例を参考に記載していきます。
ファイル名は変更してもかまいません。私はactions.ymlで作成します。
# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
name: Deploy static content to Pages
on:
# デフォルトブランチを対象としたプッシュ時にで実行されます
push:
branches: ['main']
# Actions タブから手動でワークフローを実行できるようにします
workflow_dispatch:
# GITHUB_TOKEN のパーミッションを設定し、GitHub Pages へのデプロイを許可します
permissions:
contents: read
pages: write
id-token: write
# 1 つの同時デプロイメントを可能にする
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# デプロイするだけなので、単一のデプロイジョブ
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# dist リポジトリーのアップロード
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
できたらファイルをcommitして完成です。
最後に
今回はじめてgitHub Actionsとvite.configを修正して運用してみましたが想像以上に楽でした。
私はdemoブランチを作成してmergeしたらデプロイするようにしたり、vite.config.jsのカスタムを自分好みに修正してみたり。
私のvite.config.jsをのせておくので、改善点やおすすめの設定などあったら教えてくれると私の開発がはかどります。
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
// https://vitejs.dev/config/
export default defineConfig({
base: process.env.GITHUB_PAGES ? 'REPOSITORY_NAME' : './',
root: 'src',
publicDir: '../public',
build: {
outDir: '../dist',
emptyOutDir: true,
rollupOptions: {
output: {
entryFileNames: `[name].js`,
chunkFileNames: `modules/[name].js`,
assetFileNames: (assetInfo) => {
if (/\.( gif|jpeg|jpg|png|svg|webp| )$/.test(assetInfo.name)) {
return 'assets/images/[name].[ext]';
}
if (/\.css$/.test(assetInfo.name)) {
return 'assets/css/[name].[ext]';
}
return 'assets/[name].[ext]';
}
}
}
},
plugins: [react({ jsxImportSource: '@emotion/react' })]
});
最後まで見ていただき、ありがとうございました。