Open
5

個人開発のメモ

ピン留めされたアイテム

個人による1つのサービス開発でのメモ

開発環境とか

・React(Hooks) + TypeScript
・Test: Jest
・Deploy: Firebase
・ServerSide: Firebase
・GithubActionsからの自動テストとデプロイ

事前に触れておきたいこと

  • GithubActionsのさわり
  • GithubActionsからFirebaseに自動デプロイする
  • Next.jsを使って,できそうか -> NextでデプロイならVercelで良さそう

GithubActionsのさわり

https://www.google.com/search?rlz=1C5CHFA_enJP907JP907&ei=js8wYP38Fu-smAXHzrSQBg&q=github+actions+使い方&oq=github+actions+&gs_lcp=Cgdnd3Mtd2l6EAEYBDIECAAQQzIECAAQQzICCAAyBAgAEEMyAggAMgQIABBDMgQIABBDMgQIABBDOgcIABBHELADUKQ0WKQ0YI1BaAFwAngAgAFUiAGbAZIBATKYAQCgAQGqAQdnd3Mtd2l6yAEDwAEB&sclient=gws-wiz

https://developer.yukimonkey.com/article/20200422/

GithubActionsでFirebaseにデプロイ

https://nainaistar.hatenablog.com/entry/2020/05/26/Github_ActionsでFirebaseをデプロイする

開発しているプロジェクトで

firebase init

Hostingを選択

buildを生成

npm run build

firebase.jsonを編集

firebase.json
{
  "hosting": {
    "public": "build"
  }
}
firebase deploy

package.jsonfirebase-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で先ほどのトークンをペーストする

これでok! pushしたら自動的にデプロイされるはず!

ログインするとコメントできます