Open5
個人開発のメモ
ピン留めされたアイテム
shimapon個人による1つのサービス開発でのメモ
shimaponリポジトリ
shimapon開発環境とか
・React(Hooks) + TypeScript
・Test: Jest
・Deploy: Firebase
・ServerSide: Firebase
・GithubActionsからの自動テストとデプロイ
shimapon事前に触れておきたいこと
- GithubActionsのさわり
- GithubActionsからFirebaseに自動デプロイする
- Next.jsを使って，できそうか -> NextでデプロイならVercelで良さそう
shimaponGithubActionsのさわり
GithubActionsでFirebaseにデプロイ
開発しているプロジェクトで
firebase init
Hostingを選択
buildを生成
npm run build
firebase.jsonを編集
firebase.json
{
"hosting": {
"public": "build"
}
}
firebase deploy
package.jsonにfirebase-toolsを追加する
yarn add -D firebase-tools
package.jsonを編集
package.json
"scripts": {
"deploy": "firebase deploy"
},
.github/workflow/main.ymlを編集
main.yml
name: CI
on: [push]
jobs:
FrontDeploy:
name: FrontDeploy
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
- name: setup Node
uses: actions/setup-node@v1
with:
node-version: 10.x
registry-url: 'https://registry.npmjs.org'
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
# ↑ buildが違うコマンドなら、適宜変更して下さい
- name: deploy to Firebase Hosting
run: |
yarn deploy --token=${{ secrets.FIREBASE_TOKEN }}
GithubActionsからfirebaseにデプロイするようにする
firebase login:ci
出力されたトークンをコピーし
Github>プロジェクト>setting>secrets>New secretに
Name:FIREBASE_TOKENで先ほどのトークンをペーストする