Nuxt.jsで開発した静的サイトを手動でレンタルサーバーなどにアップロードしようとすると
- 手元でyarn generateする
- distフォルダ以下をFTP等で手動でアップロードする
というなんともめんどくさい手順を踏まなければなりません。
さらに.env等に環境変数を定義している場合であればgenerateする前に環境変数が間違っていないか等も確認しなければなりません。
今回はGithub Actionsを使って自動でサーバーにアップロードする方法を紹介します。
GitHubのSecretsに環境変数を登録
.envに環境変数を定義している場合はそれらもsecretsに登録しておく必要があります。
secrets.FTP_SERVER : FTPのhost
secrets.FTP_USERNAME : FTPのユーザー名
secrets.FTP_PASSWORD : FTPのパスワード
//その他.envに環境変数を定義している場合はそれらの情報も登録
secrets.BASE_URL : フロントのURL
secrets.API_URL : APIサーバー側のURLymlファイルを作成
プロジェクトルートディレクトリの.github/workflows/の下にYAML形式でmain.ymlというファイルを作成します。
name: ftp-deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node: [14.17]
steps:
- name: Checkout
uses: actions/checkout@master
- name: Setup Node
uses: actions/setup-node@v2.1.2
with:
node-version: ${{ matrix.node }}
- name: Create .env file
run: |
touch .env
echo BASE_URL=${{ secrets.BASE_URL}} > .env
echo API_URL=${{ secrets.API_URL}} >> .env
working-directory: ./src
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- uses: actions/cache@v2
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install dependencies
run: yarn
working-directory: ./src
- name: Generate
run: yarn generate
working-directory: ./src
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@4.3.0
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
protocol: ftps
local-dir: ./src/dist/
server-dir: ./public_html/
実行内容の解説
- mainブランチへのpushを検知
- nodeのインストール
- .envファイルの作成
- yarnで依存ファイルをインストール
- yarn generateで静的ファイルを生成
- distディレクトリ下をftpでドキュメントルートへアップロード
参考
https://k-markup.com/blog/github-actions-nuxt-deploy/
関連記事
