やりたいこと
feature/〜ブランチつくってdevelopブランチにプルリク, ある程度まとまったらdevelopブランチをmasterへプルリクして開発したい.
そのときmasterの変更があったときにだけgithub Actionsでビルド, 出力をgithub pagesでホスティングしたい.
なぜやるか
正直, ポートフォリオみたいに一人かつ複雑ではないものを作るだけならこんな遠回りしなくても普通にこんな感じで直接masterブランチにプッシュすればいい.
でもやっぱりいつかチーム開発にはもちろんこんな感じになるし多分, あとCI/CDを意識した方が今後役に立つから…
github Actionsとgithub pages使ってみたかったし,
なによりかっこいいのでやりました.
前提
react-create-appでアプリを作っている前提とします.
今回やるのはmasterブランチに変更があったらデプロイされるところまでです.
手順
ビルドの確認
npm run start
npm run build
コマンドを実行してlocalhostで動くか確認と正しくビルドできるかの確認をしましょう. CI/CDの部分を作るのにそれ以前の問題になってしまいます.
なぜこんな初歩的なことを言うのかというと僕がこれを怠ったため時間を無駄にしてしまったからです. ちゃんと確認しましょう.
具体的な確認
- localhost:3000に意図しているページが表示されているか.
- buildコマンドで/buildディレクトリが作成され, 中にそれっぽいものが入っているか
確認が終わったらmasterへプッシュしてしまいましょう.
github Actionsのymlを書く
/.github/workflows/ディレクトリの中にymlファイルを書くとgithub君はgithub Actionsとして認識してくれます.
以下は僕が作成したものです.
name: deploy
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v2.1.0
with:
node-version: "12.x"
- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
- run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
やってること
- masterブランチがpushされたときにイベント発火
- ubuntu環境をセット, npm もいれる
- npm ci でパッケージをインストール
- npm run buildでビルド, 出力はデフォルトで./buildへ吐き出される
- ./buildにあるファイルをgh-pagesブランチにコミット
それではファイルをmasterにpushしてください.
するとgithub Actionsが動いているはずです.
github上の設定
最後にgithub pagesの設定を行います.
リポジトリのsettingタブを開いてください. 下の方にgithub pagesの設定項目があります.
先ほどのgithub Actionsでgh-pagesブランチができているはずなのでそれを選択してください.
すると画像の緑の部分のようにメッセージがでます.
そのURLがデプロイ先になりますが, まだ正常なページが表示されません.
package.jsonにhomepageを追加
package.jsonに以下の記述を追加してください
"homepage": "デプロイ先のURL"
デプロイ先のURLは先ほど確認した緑の部分に表示されているURLにしてください. これがないとcssなどが404になってしまいます.
さいごに
勝手にデプロイされるのってなんかいいですね.
あと独自ドメインでホスティングする方法は別記事に書きます.
コメント