piyopiyo.ex#8 GitHub ActionsでGigalixirにデプロイする

2022/6/4に開催されたpiyopiyo.ex#8で使用したスライドの更新版です。
https://piyopiyoex.connpass.com/event/247404/

piyopiyo.exはElixir/Phoenixの初心者向け勉強会グループです。
https://piyopiyoex.connpass.com/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 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つのインスタンスが立てられます。
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. ＼それではやっていきましょう／
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. では、デプロイしましょう！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. デプロイできたね、やったね！
    

    View Slide

26. 閲覧ありがとうございました！
    

    View Slide