Slide 1

Slide 1 text

PhoenixアプリでCI/CD! GitHub Actionsで Gigalixirにデプロイする 2022/6/8 nako-kd We will be happy.

Slide 2

Slide 2 text

今回(piyopiyo.ex#8)でやりたいこと ● 前回までのイベントで作成したpiyopiyo.ex感想サイトを公開する ○ 環境はGigalixir ○ mainブランチにPRがマージされたらGigalixirに自動でデプロイ処理が走るようにしたい ■ デプロイはGithub Actionsで自動で処理させる develop main deploy

Slide 3

Slide 3 text

今回のデプロイの流れ Repository GitHub Actions The only platform that fully supports Elixir and Phoenix!!! (1) Pull Request (2) Trigger workflow (3) Deploy We will be happy.

Slide 4

Slide 4 text

Gigalixirとは ● “The only platform that fully supports Elixir and Phoenix. Unlock the full power of Elixir/Phoenix. No infrastructure, maintenance, or operations.” ○ GigalixirはElixirとPhoenix専用のPaaS。 ■ PaaS(Platform as a Service)はアプリケーション運用に必要なサーバー環境 (サーバーの設置、OSのインストール、ネットワークの設置、 DBの設定など)をまと めて提供するプラットフォームです。 OSの更新なども自動で行ってくれます。 ■ 同様のサービスにはHerokuなどがあります。 ○ 無料枠は1つのインスタンスが立てられます。

Slide 5

Slide 5 text

GitHub Actionsとは ● GitHubで提供しているCI/CDツール。 ● プッシュ、Issue、リリースなどのGitHubプラットフォームのイベントをトリガーとして ワークフローを起動する。 公式ページより

Slide 6

Slide 6 text

CI/CDとは ● Continuous Integration(継続的インテグレーション)/ Continuous Delivery(継続 的デリバリー)の略 ○ 継続的インテグレーションと継続的デリバリーまたは継続的デプロイのいずれかを組み合 わせたプラクティスを指す。 ■ 継続的インテグレーション ● すべての開発者の作業コピーを定期的に共有されたメインラインにマージすること。 1 日に数回行われるのが一般的。 ■ 継続的デリバリー ● チームが短いサイクルでソフトウェアを生産し、いつでも確実にソフトウェアをリリースで きるようにし、ソフトウェアをリリースする際には、手動で行うソフトウェアエンジニアリン グのアプローチ。 ● 継続的デリバリーと違いデプロイは手動。 ■ 継続的デプロイ ● 自動化されたデプロイによって高い頻度で最新のソフトウェア機能を提供し続けるソフ トウェア開発手法・運用手法。

Slide 7

Slide 7 text

再び、今回のデプロイの流れ Repository GitHub Actions The only platform that fully supports Elixir and Phoenix!!! (1) Pull Request (2) Trigger workflow (3) Deploy

Slide 8

Slide 8 text

\それではやっていきましょう/

Slide 9

Slide 9 text

まず、Gigalixirに環境を作ります

Slide 10

Slide 10 text

Gigalixirにアプリを作成する ● Gigalixirにアプリを作成 任意のアプリ名を入力。 リージョンは好みがない 場合はデフォルトのまま でOK。

Slide 11

Slide 11 text

Gigalixirにデータベースを作成する 今回はFree(無料)を選択

Slide 12

Slide 12 text

次に、GitHub Actionsと デプロイに必要な設定を追加します。

Slide 13

Slide 13 text

GitHub Actionsのワークフローを設定する ● .github/workflows/deploy_to_gigalixir.ymlに設定を記述する。 name: Deploy to Gigalixir on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - run: sudo pip install gigalixir --ignore-installed six - run: gigalixir login -e "${{ secrets.GIGALIXIR_EMAIL }}" -y -p "${{ secrets.GIGALIXIR_PASSWORD }}" - run: gigalixir git:remote ${{ secrets.GIGALIXIR_APP_NAME }} - run: git push -f gigalixir HEAD:refs/heads/main - run: gigalixir run mix ecto.migrate

Slide 14

Slide 14 text

コミットを忘れずに! ● git commitしましょう $ git add .github/workflows/deploy_to_gigalixir.yml $ git commit -m "Set GitHub Action workflow"

Slide 15

Slide 15 text

Gigalixirデプロイに必要な設定ファイルを追加(1/3) ● elixir_buildpack.configにElixir、Erlangのバージョンに記載する。 # Elixir version elixir_version=1.13.4 # Erlang version erlang_version=25.0

Slide 16

Slide 16 text

Gigalixirデプロイに必要な設定ファイルを追加(2/3) ● phoenix_static_buildpack.configにnodeのバージョンを記載する。 node_version=16.15.0

Slide 17

Slide 17 text

Gigalixirデプロイに必要な設定ファイルを追加(3/3) ● assets/package.jsonに下記を記載します。ファイルがない場合は作成。 { "scripts": { "deploy": "cd .. && mix assets.deploy && rm -f _build/esbuild*" } }

Slide 18

Slide 18 text

コミットを忘れずに! ● git commitしましょう $ git add elixir_buildpack.config phoenix_static_buildpack.config assets/package.json $ git commit -m "Set Elixir, Erlang, and Node version"

Slide 19

Slide 19 text

GitHubのSettingsからSecretsの設定をする ● GitHub Actionsで使うsecretsを設定する GIGALIXIR_EMAIL、 GIGALIXIR_PASSWORD、 GIGALIXIR_APP_NAMEを 登録します

Slide 20

Slide 20 text

では、デプロイしましょう!

Slide 21

Slide 21 text

git pushします ● pushがトリガーになる設定を追加したので、git pushするとGigalixirにデプロイが実 行されます。 $ git push

Slide 22

Slide 22 text

GitHubのリポジトリのActionsメニューを確認しましょう deployジョブをクリックすると 実行されたログが確認できます。

Slide 23

Slide 23 text

GitHubのリポジトリのActionsメニューを確認しましょう 全てのステップの実行が完 了しています

Slide 24

Slide 24 text

GigalixirのステータスがHealthyになるまで待ちましょう Healthyになった後も 反映まで数分かかることが あります。

Slide 25

Slide 25 text

デプロイできたね、やったね!

Slide 26

Slide 26 text

閲覧ありがとうございました!