はじめに
開発を始めていく途中にぶつかる壁として、CI/CDがあると思います。私も現在、CI/CDって何ソレオイシイの？となってるので、今回理解も兼ねてGitHubActionsを使ってFirebaseHostingに自動デプロイしてみようと思います。
少し前にFirebaseをCLIでデプロイするのは行ったので、復讐も兼ねたいと思います。
CI/CDとは
- CI（継続インテグレーション)
CIとは、wikipediaには以下のように書かれていました。
すべての開発者の作業コピーを定期的に共有されたメインラインにマージすることである
何を言ってるのかよくわからないですよね。
GitHub等での開発は、featureブランチで機能開発、developで統合、main（昔はmaster)はリリース用とブランチを分けて作業します。
その中でいざ完成してリリースします！となった時、マージ作業をしてビルドしてみるとエラーが発生し、修正対応に追われることがあります。また、マージ作業もfeatureブランチの数によってはかなりの数のマージを行う必要があり、その度に修正対応に追われる可能性があります。マージ作業が多ければ多いほど、原因の特定は難しくなるので、かなりリスクのある行動をしていくことになってしまいます。
そんな問題を解決するための手法がCIです。開発者変更した内容をリリース用のブランチに統合させてエラーが出ないかビルドとテストを反復的に行うプロセスのことです。
インテグレーションは、英語で統合という意味で、開発ではソフトウェアやネットワーク等を統合して情報システムを構築するという意味で使われます。
- CD(継続デリバリー）
こちらもwikipediaでは、以下のように書かれていました。
チームが短いサイクルでソフトウェアを生産し、いつでも確実にソフトウェアをリリースできるようにし、ソフトウェアをリリースする際には、手動で行うソフトウェアエンジニアリングのアプローチである
この説明は、個人的にはわかりやすいかなと感じています。
これは、CIの延長でいつでもリリースできるようにする手法のことを言います。
CI/CDを体験してみる
１.Reactアプリケーションの準備
まず下のコマンドでReactアプリケーションを作成します。
yarn create react-app react-firebase-hosting
下の文言が出てきたらアプリケーションの作成はできています。
Happy hacking!
次に下のコマンドでReactアプリケーションが動作するかを確認します。
yarn start
下のURLにアクセスして
これが表示されたらokです。
なんかyarn startを実行したら自動的にブラウザ遷移したので、もしURLアクセスする必要ないかもしれません
2.Githubへのプッシュ
リモートリポジトリを作成します。
ローカルリポジトリを作成します。
git init
アプリケーションディレクトリ内で行ってだくさい。
Reactのプロジェクトファイルにcdコマンドで移動してください。
lsコマンドで下のようになってたら大丈夫です。
ls
README.md node_modules package.json public src yarn.lock
リモートリポジトリを登録します。
- HTTPSで登録
git remote add origin https://github.com/maooz4426/react-firebase-cicd.git
- SSHで登録
git remote add origin git@github.com:maooz4426/react-firebase-cicd.git
ステージングします。
git add .
コミットメッセージを記述します。
git commit -m "first"
プッシュします。
git push origin main
こうなっていたらok です。
3.Firebaseでのアプリケーションの作成
Firebaseにアクセスします.
プロジェクトを作成をクリックして、適当に名前をつけます。
Googleアナリティクスは許可しておきます（使いませんが）
これも下のようにしておきます。
この表示が出てきたら待ちます。
完了すると続行ボタンが出てくるので、続行を選択します。
下の画面に遷移すると思います。今回はReactアプリケーションをデプロイするのでウェブと表示されているボタンを選択します。
アプリ名を登録するので登録します。また、Firebase Hostingも設定します。
FirebaseSDKの追加を選択する画面に移動します。今回はスクリプトタグの使用を選択します。
スクリプトタグは後々確認できるのでコピーしなくても大丈夫です
Firebaseへデプロイするためのコマンドをインストールするための方法が出てきます。
yarnを使う場合は、下のコマンドでインストールしてください。
yarn global add firebase-tools
Firebaseへのデプロイ方法が書かれています。これは後々触るので飛ばして、コンソールへ進むをクリックしてください。
4.FirebaseCLIでログイン
以下のコマンドで、FirebaseCLIにfirebaseアカウントにログインしてください。
firebase login
5.firebaseプロジェクト(ローカル）の初期化
もしコマンド周りの使い方が分からなかったら友人の書いた記事がわかりやすいと思うのでご覧ください
以下のコマンドで初期化します。
firebase init
下のように選択肢が出てくるので、Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploysを選択します。
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm
your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
◯ Emulators: Set up local emulators for Firebase products
Hostingとついてる似ている名前のが２つあると思います。
違いとしては
-
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Firebase Hostingのファイル構成、GitHub Actionのデプロイも設定 -
Hosting: Set up GitHub Action deploys
GitHubActionsのデプロイ設定のみ
プロジェクトどうしますかと聞かれるので、先ほどFirebaseのプロジェクトを作成しているので、Use an existing projectを選択します。
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
どのプロジェクト使いますかと聞かれるので、下記を選択します。
Select a default Firebase project for this directory: (Use arrow keys)
❯ react-hosting-cicd (react-hosting-cicd)
どのディレクトリを使うかと聞かれます。これはhostingする際に表示するアプリケーションを指定します。デフォルトはpublicですが、Reactは事前にビルドが必要で、ビルドするとアプリケーションがbuildディレクトリに配置されます。
なので、下記のようにbuildと入力します。
? What do you want to use as your public directory? build
絶対にbuildと指定するようにしてください。
今回は、single-page app(SPA)で行うので、yを入力します。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
Github Actionsの設定をするかと聞かれているので、どう考えてもyesです。なのでyを入力します。
? Set up automatic builds and deploys with GitHub? (y/N) y
こんな画面が出てくるので、Authorize firebaseを選択します。
この画面が出たら認証完了です。
CI/CDを行うリポジトリを選択します。
For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
maooz4426/react-firebase-cicd
Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_REACT_HOSTING_CICD.
と出てきます。
これはgithub actionsを使えるようにセットアップを自動的に行うことをしています。
デプロイする前にビルドを行うかを設定します。
? Set up the workflow to run a build script before every deploy? (y/N) y
ビルド方法を選択します。yarnを使用するので、yarn install && yarn run buildを入力します。
? What script should be run before every deploy? yarn install && yarn run build
PR（プルリクエスト）が出されたらマージするのか聞かれます。今回はyにします。
? Set up automatic deployment to your site's live channel when a PR is merged? (Y/n) y
本番環境で使用するブランチを聞かれます。基本的にリリースブランチはmainなので、今回はこのままmainにしたいので、何も入力せず、enterを押します。
? What is the name of the GitHub branch associated with your site's live channel? (main)
以下の文言が出ればFirebaseプロジェクトの初期化は完了です。
✔ Firebase initialization complete!
ここまでできたらコミット等行って、mainにプッシュしましょう。
6.developにブランチを切る
下のコマンドでdevelopブランチを切ります
git checkout -b develop
developブランチに移動したら、reactアプリケーションの表示を変更します。
下記のようにApp.jsに、<h1>CICD Test</h1> を追加します。
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
+ <h1>CICD Test</h1>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
以下のコマンドで表示させると
yarn start
下の画像のように変更されます。
ここまでできたらdevelopブランチをコミットして、以下コマンドでpushします。
git push origin develop
7.PRする
バーからPull requestsを選択して、以下のように設定します。
もう一度撮り直してるのでcloseしてあるのは、気にしないでください
ブランチがdevelopからmainに向かっていることに注意してください
下に緑色のcreate pull requestボタンがあるのでそれを選択します。
すると黄色の縁が回ってるので、終わるまで待ちます。
Merge pull requestを押すと下のようになります。
そして表示されているurlをクリックすると
表示されました。
ここまでの過程がCIの部分です。
次にCDができているか確認してみようと思います。
Firebaseの方で、ドメインの下の方に、リリース用のURLがあるのでそこをクリックして確認すると
うまくいきました！
CDがうまく機能してなく色々いじったため文面が違うのは許してください、時間が経過したら反映されてました
最後に
CICDの中で行う内容は.github/workflowsの中にあるymlファイルに書かれているので、機会があったら自分で書いてみようと思います。