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

# 追記

この記事はGitHubActions v1になります。
v2とは大きく仕様が異なりますので、ご注意ください。

# はじめに
Elm、いいですよね
GitHubActions、いいですよね
Firebase、いいですよね

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

# 手順

## Firebaseにプロジェクトを作る

<img width="536" alt="スクリーンショット 2019-03-09 22.47.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/06ac40bb-87d1-165f-fc0a-ae91b2474170.png">

雑に作ります。今回のプロジェクトIDは`elm-firebase-githubactions`にしました。
「アナリティクスの地域」と「Cloud Firebaseのロケーション」を変えない方が最短ですが、一応変えときます。

## GitHubにリポジトリを作る

<img width="1440" alt="スクリーンショット 2019-03-09 22.55.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/b89706b6-d6ea-4551-1075-55c859193f9d.png">

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

## ローカルでfirebase loginする

```bash

$ firebase login
```

loginします。

## ローカルでfirebaseをinitする

```bash
$ 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で進みます。
そうすると、ディレクトリが自動で作られるので、ここに書いていくことになります。

```bash
$ firebase use --add elm-firebase-githubactions
```

を一応しておきます。

## create-elm-app

楽をするため、create-elm-appを使います。
Elmで開発するために必要なものを一通り入れてくれる便利なやつです。
https://github.com/halfzebra/create-elm-app#quickstart
まだインストールしていないならインストールした後、

```bash
$ create-elm-app my-app
```
を打ちます。

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

```bash
$ elm-app eject
```
を打ちます。
これで `npm` で色々できるようになりました。

ここで、elmの成果物の出力先をfirebaseに伝えるため、`firebase.json`をいじります。
https://github.com/Goryudyuma/elm-firebase-githubactions/commit/9d374fffc94d5b3aba0ddbfcf5ad54177fcbf762
`hosting`の`public`を`my-app/build`に変えます。

## そろそろGitHubの方へ

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

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

<img width="1440" alt="スクリーンショット 2019-03-09 23.31.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/f7c64efc-f906-6759-1721-1ed329110523.png">

まだ申請制なので、まだの方は申し込みからしましょう。
https://github.com/features/actions

<img width="1440" alt="スクリーンショット 2019-03-09 23.34.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/c395fa55-d79f-eaeb-b241-a4f047b10ea1.png">
「create a new workflow」をします。

<img width="1440" alt="スクリーンショット 2019-03-09 23.35.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/5138e578-7f09-1b94-560b-b7e5b20c691e.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_KEY`を`FIREBASE_TOKEN`、`Secret value`に、ローカルで

```
$ firebase login:ci
```
と打って出てきたTokenをいれます。`1/`から始まる文字列です。
そして、**env**に`PUBLIC_KEY`が`PROJECT_ID`,`Value`にプロジェクトIDをいれます。
今回作ったプロジェクトのプロジェクトIDは`elm-firebase-githubactions`として作ったので、この値を入れます。

### 完了図

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

最終的に、こんな感じになっているはずです。
<img width="288" alt="スクリーンショット 2019-03-10 0.14.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/7bfe073c-6fbe-30dd-3cbf-b523c6a5db89.png">
<img width="292" alt="スクリーンショット 2019-03-10 1.25.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/2ceab591-7010-39d8-83e8-265e023cceab.png">

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

これで完成です！

# まとめ

## 自動でCI/CD

<img width="1440" alt="スクリーンショット 2019-03-10 0.17.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/481dfcd1-3f3a-8e79-b3ff-7a24f87af8ac.png">

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

<img width="1061" alt="スクリーンショット 2019-03-10 1.33.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/67255/186303bc-7fbe-51ee-5031-8fc4b44bfc6d.png">
https://elm-firebase-githubactions.firebaseapp.com/

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

今回使ったブランチはそのまま置いておくので、困ったら見に来てください。
https://github.com/Goryudyuma/elm-firebase-githubactions

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