GitHub
Elm
Firebase
GitHubActions

elmで作ったものを、GitHubActionsを使って自動でFirebaseにデプロイするまでの手順


はじめに

Elm、いいですよね

GitHubActions、いいですよね

Firebase、いいですよね

というわけで、一気にやっちゃいましょうっていうハンズオンです。


手順


Firebaseにプロジェクトを作る

スクリーンショット 2019-03-09 22.47.35.png

雑に作ります。今回のプロジェクトIDはelm-firebase-githubactionsにしました。

「アナリティクスの地域」と「Cloud Firebaseのロケーション」を変えない方が最短ですが、一応変えときます。


GitHubにリポジトリを作る

スクリーンショット 2019-03-09 22.55.55.png

作業したいディレクトリに行き、git cloneしときます。


ローカルでfirebase loginする


$ firebase login

loginします。


ローカルでfirebaseをinitする

$ firebase init

今回使いたいのはHostingなので、Hostingを「Spaceキーで選んで」Enterキーで進みます。

今回のProject名はまだないので、

[create a new project]

を選びます。

What do you want to use as your public directory?

は、(今回は使わないので)とりあえずデフォルトで、

Configure as a single-page app (rewrite all urls to /index.html)?

はyで進みます。

そうすると、ディレクトリが自動で作られるので、ここに書いていくことになります。

$ firebase use --add elm-firebase-githubactions

を一応しておきます。


create-elm-app

楽をするため、create-elm-appを使います。

Elmで開発するために必要なものを一通り入れてくれる便利なやつです。

https://github.com/halfzebra/create-elm-app#quickstart

まだインストールしていないならインストールした後、

$ create-elm-app my-app

を打ちます。

ただガワを用意して欲しかっただけなので、

$ elm-app eject

を打ちます。

これで npm で色々できるようになりました。

ここで、elmの成果物の出力先をfirebaseに伝えるため、firebase.jsonをいじります。

https://github.com/Goryudyuma/elm-firebase-githubactions/commit/9d374fffc94d5b3aba0ddbfcf5ad54177fcbf762

hostingpublicmy-app/buildに変えます。


そろそろGitHubの方へ

この辺りで一度コミットし、pushします。

GitHubにきちんとpushされてることを確認したら、Actionsのページに行きます。

スクリーンショット 2019-03-09 23.31.23.png

まだ申請制なので、まだの方は申し込みからしましょう。

https://github.com/features/actions

スクリーンショット 2019-03-09 23.34.05.png

「create a new workflow」をします。

スクリーンショット 2019-03-09 23.35.17.png

GitHubActionsへようこそ!

自動で

npm install

npm run build

した後、

firebase deploy

するように設定します。


npm install

まずはGitHub Action for npmを選びます。

labelは適当なものをつけてください。

args

install

といれます。runsは空欄で大丈夫です。


npm run build

GitHub Action for npmを選びます。

labelは適当なものをつけてください。

args

run build --prefix my-app

といれます。こちらもrunsは空欄で大丈夫です。


firebase deploy

firebaseの方は、GitHub Action for Firebaseを選んで、runsは空欄、args

deploy

といれます。

また、envの「Create a new secret」で、SECRET_KEYFIREBASE_TOKENSecret valueに、ローカルで

$ firebase login:ci

と打って出てきたTokenをいれます。1/から始まる文字列です。

そして、envPUBLIC_KEYPROJECT_ID,ValueにプロジェクトIDをいれます。

今回作ったプロジェクトのプロジェクトIDはelm-firebase-githubactionsとして作ったので、この値を入れます。


完了図

これをcommitしてやれば完成です。

最終的に、こんな感じになっているはずです。

スクリーンショット 2019-03-10 0.14.01.png

スクリーンショット 2019-03-10 1.25.36.png

これをStart Commitからコミットしてやります。

これで完成です!


まとめ


自動でCI/CD

スクリーンショット 2019-03-10 0.17.10.png

こんな感じで、Pushすると自動でビルドされてデプロイまでされます。

スクリーンショット 2019-03-10 1.33.34.png

https://elm-firebase-githubactions.firebaseapp.com/

必要であればテストを自動で実行したりとか、ブランチをフィルターしてmasterブランチでのみデプロイされるようにしたり、色々できます。

今回使ったブランチはそのまま置いておくので、困ったら見に来てください。

https://github.com/Goryudyuma/elm-firebase-githubactions

最後まで読んでいただき、ありがとうございました!