GithubアクションでGithubページにプロジェクトを配備する

この投稿では、既存のGithubアクションを使用する基本的なワークフローの設定方法について説明します.このワークフローは、マスターブランチに変更が行われるたびに、静的なWebサイトをgithubページに展開します.
このために私たちはDeploy to GitHub Pages Action .

ワークフローの作成
リポジトリのワークフローは.github/workflows/ フォルダ.
このフォルダを作成します.YMLファイル.deploy-to-gh-pages.yml 必要に応じて名前をつけてください.

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected]

      - name: Install and Build 🔧
        run: |
          npm install
          npm run-script build

      - name: Deploy 🚀
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages
          folder: dist

ビルドステップ

    - name: Install and Build 🔧
      run: |
        npm install
        npm run-script build

この節では、展開する前にコードをコンパイルするために必要なスクリプトを入れます.必要がない場合は、このセクションを削除します.

オプション

      with:
        branch: gh-pages
        folder: dist

これらのオプションはすべて、Deploy to GitHub Pages Action 働くために.
The BRANCH オプションはビルドファイルを展開する枝です.この場合はgh-pages . GitHubが自動的にあなたのgithubページウェブサイトをセットアップするようにそれをしてください.

You need to create the gh-pages branch prior to this. The Action will fail if the branch does not exist.

The FOLDER オプションは、展開するリポジトリのフォルダです.通常はdist Vue用.JSアプリbuild 反応する.jsアプリ.
必要に応じて、特定のアクセストークンを使用する場合はtoken オプション

token: ${{ secrets.ACCESS_TOKEN }}

このオプションは、リポジトリを操作するアクションを承認するために使用するアクセストークンです.

You can generate this token in Profile Settings / Developer settings and add it in your repository's secrets in Settings/Secrets

カスタムドメイン名
カスタムドメイン名を使用する場合は、事前に追加する必要がありますCNAME ファイルのルートgh_pages あなたのドメイン名を持つブランチ.

e.g. dev.to

カスタムドメイン名を使用していない場合は、プロジェクトのルートがサーバールートでホストされていないことを忘れないでください.

Vue用.JSアプリの追加vue.config.js . Further information .

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/repository-name/'
        : '/'
}

反応する.これを加えるJSアプリpackage.json . Further information .

"homepage":"https://yourusername.github.io/repository-name"

デフォルトの枝を変更する(オプション)
デフォルトではmaster 変更時に分岐します.
変更するにはBASE_BRANCH オプションwith 展開の前にチェックアウトしたい枝の名前を指定します.

e.g. BASE_BRANCH: prod

この部分をワークフローファイルに変更する必要もあります.

on:
  push:
    branches:
      - master

この部分はどの枝を変更を監視するかを指定します.この場合、アクションは、master 枝.

note: Your workflows won't appear in the Actions tab if they are not pushed on the master branch. However, you can still access your workflow’s runs in the commit's detail.

それだ!あなたの変更を押してください、そして、あなたは現在魔法がタブを操作するのを見ることができます.

そして、我々は、アプリケーションがあなたの展開をチェックアウトすることができますGitHubページに展開されていることを見ることができますenvironment コードタブのボタン

タブを無効にするか、または有効にする必要があります.ソース設定を変更することによって行うことができますmaster その後gh-pages .
あなたのライブアプリケーションへのリンクはhttps://yourusername.github.io/repository-name