Ionic のプロジェクトを Bitbucket のパイプラインで Firebase にデプロイする
Ionic のプロジェクトを Bitbucket のパイプラインで Firebase にデプロイする
突然ですが、オグリのどんぶりが届きました。海鮮丼食べたいです。
最近ちまちまと Ionic を触っています。PWA の対応（これは Angular の機能） やスマホ向けにビルドできたりするのでなにか簡単なものを作ってリリースしてみたい気持ちが高まっています。その中で CI/CD を使えるようになりたかったので試してみました。参考になれば幸いです。
公開することを目的にしているので確認は少し手抜きです。間違いやもっといい方法があれば教えていただけたらと嬉しいです。
概要
- Ionic でプロジェクトを作る
- Bitbucket にプッシュ
- パイプラインの作成
- Firebase にデプロイ
- パイプラインでデプロイ
Ionic でプロジェクトを作る
Ionic のインストールは動作確認してないのでこれでいけるかわかりません。 公式に従えば問題ないと思います。
npm install -g @ionic/cli
プロジェクトを作ります。
ionic start myApp blank --type=angular --capacitor
なぜか自分の環境ではエラーが出ます。Angular のほうで使ってる karma-jasmine-html-reporter が要求する jasmine-core のバージョンが合ってないようです。
なので、バージョンを変えます。package.json を開いて、次のように変更します。
- "jasmine-core": "~3.7.1", + "jasmine-core": "~3.8.0",
npm install をして、一応 npm audit fix を強制的にしておきます。
npm install
npm audit fix --force
ionic serve で実行して動くことを確認します。
ionic serve
Bitbucket にプッシュ
Bitbucket にプッシュするために Bitbucket 側にリポジトリを作成します。
リポジトリ名を作成したプロジェクトの名前と同じようにしておきます。
リポジトリのURLをコピーします(ページのコピーをすると git clone がついてきます)。
git init git remote add origin https://xxxx@bitbucket.org/xxxx/myapp.git
Ionic のプロジェクトをプッシュしてリポジトリに反映させます。
git add --all git commit -m "first commit" git push -u origin master
プッシュができたらF5でページをリロードして、プッシュしたファイルが表示されることを確認します。
パイプラインの作成
ここからは Bitbucket 側の操作です。
左のメニューから Repository setting > [PIPELINES] Settings を選択し、Pipelines Settings を開きます。
Enables Pipelines を有効側にします。
Configure bitbucket.pipeline.yml ボタンをクリックしてパイプラインのファイルを作成してもらいます。
ボタンを押しても作成してもらえるわけではなさそうなので、左のメニューから Deployments を選択してページを移動します。
すると bitbucket.pipeline.yml の内容が編集できるページが開きます。
右下に Commit file があるので、それをクリックしてコミットします。 コミットをするとパイプラインが動くようになって、先ほどコミットした内容で実行されます。 数秒待つと以下のようなページが表示されて成功していることを確認できます（失敗する場合は緑の箇所が赤くなっています）。
パイプラインを動かせることを確認しました。次は、Ionic プロジェクト側に戻って Firebase にデプロイする準備をします。
Firebase にデプロイ
まずは、先ほどコミットされたパイプラインの内容を反映させるため、リモートの内容を反映させます。
git pull
Firebase にデプロイするためにまずは Firebase の環境を作ります。 まずは、 Firebase のページに移動し、プロジェクトを作成します（ここでは myApp にしました）。
ここでは npm の firebase/cli を使用するので、以下のようにしてツールを取得します。 ログインもしておきます。
npm install -g firebase-tools firebase login
ちなみに、長期間ログインして放置しているとログイン状態でも firebase を操作できなくなります。
その場合は、一度 firebase logout でログアウトして、再度ログインすれば問題ないと思います。
ログインできたら、次のコマンドで Firebase の初期化を行います。
firebase init
するといくつか質問されるので、答えていきます。
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confir m your choices. ◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ? Please select an option: ❯ Use an existing project ❯ myapp-3c20c (myApp) ? What do you want to use as your public directory? www ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) n ? Set up automatic builds and deploys with GitHub? (y/N) n
初期化に完了すると .firebaserc, firebase.json が作成されます。
準備ができたので、次のコマンドでデプロイできるか確認します。
ionic build --prod firebase deploy --only hosting
デプロイが確認できたらコミットしておきましょう。
パイプラインでデプロイ
最後です。ローカルから手動でデプロイできることが確認できたので、次はパイプラインでデプロイします。 まず、Git のリモート側とローカル側の情報を同期しておきましょう。
次に CI 環境でデプロイするために次のコマンドで Firebase にトークンを発行してもらいます。
firebase login:ci
コマンドを叩くとブラウザが開き、認証画面が表示されるので許可します。 許可したら、コマンドを実行したターミナルに戻り、出力されたトークンをメモしておきます。
ここから Bitbucket 側で操作しますが、master ブランチではなく別のブランチで作業します。左のメニューから ブランチ を選択し、右上にある Create branch ボタンをクリックしてブランチを作成します。ブランチ名は configure-deploy-pipeline にしました。
ブランチを作成したらソースのページに移動し、ブランチを configure-deploy-pipeline に切り替えます。
切り替えたら bitbucket-pipelines.yml を選択します。
bitbucket-pipelines.yml の内容が表示されたら右側にある 編集 ボタンをクリックして編集のページに移動します。
そして、一番下にある内容を次のように書き換えます。PROJECT_ID は人によって異なるので、Firebase で確認して自身の環境に合わせて変更してください。
- step: name: 'Deployment to Production' deployment: production script: - npm install -g @ionic/cli - npm install - npx ionic build --prod - pipe: atlassian/firebase-deploy:1.2.0 variables: FIREBASE_TOKEN: xxxxxxxx PROJECT_ID: 'myapp-xxxx' MESSAGE: 'Deploying myApp' EXTRA_ARGS: '--only hosting' DEBUG: 'true'
また、一番上に使用するイメージの情報が書かれているのですが、これを node 14.17 を使いたいので次のように変更します。
- image: atlassian/default-image:2 + image: node:14.17
編集が完了したらコミットボタンを押してコミットします。 Pipelines のページに飛んで、一番上にある Status をクリックすると何が行われているか確認できます（左側にステータス、右側にログが出力されるページに飛ぶ）。
成功したら master(main) ブランチにマージしておきます。ブランチ のページからマージするブランチを選択し（configure-deploy-pipeline）、マージ ボタンをクリックして、マージします。
最後にデプロイが成功しているか Deployments ページで確認し、Firebase のプロジェクトの Hosting 側でもデプロイされていることが確認できると思います。
