CI / CD パイプラインで詰まった話 2025.02.20 第3木曜LT会 須藤　裕太

自己紹介 須藤 裕太　RUNTEQ 63期bクラス Ruby on Rails やJavaScriptをメインで学習中 X(Twitter) @dochin26 職歴 10年ほど駅業務を経験 → トラック配送 趣味 ボードゲーム（カタン・ワイナリー・街コロ） 2

1.　経緯 2.　本題 3.　原因と対策 4.　AWSで掛かったコスト Agenda CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 3

1. 経緯 4

SPAなWEB技術を使ってみたい 5

SPA(Single Page Application) 単一のWebページでアプリケーションを構築する構造設計の名称 ページ全体をロードするのではなく、必要な部分のみサーバーに要求 返ってきたデータをJavaScriptで処理し、HTMLへ反映 メリット 動作性の向上 高度なWeb表現 ネイティブアプリの代用 SPAとは？ CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 6

Progate、ドットインストール Ruby、Rails、JavaScript、HTML、SQL Railsチュートリアル Twitterのような投稿サイト ECサイト制作 RailsとStripeを使用したECサイトの構築 ここまでの学習状況 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 7

APIモードで動作させることで可能 M(Model)、V(View)、C(Controller)の内、Vを削る。 Vの部分はReactなどJavaScriptフレームワークを使用する。 Railsとのデータの伝達はJSON形式で行う。 最近はRails単体でも動作 HotwireやTurbo Streamsを使用することで、SPAに近い動作ができる Ruby on RailsでSPAは可能？ CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 8

RailをAPIモードで動作 ↓ フレームワーク(React, Vue.js, NEXT.js…)と組み合わせる 疑問 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 9

どうやって？ 10

RailsやReactなど単体だけなら資料がたくさんある でも、それらを組み合わせた資料となると少なくなる 公式ドキュメントを読むのは難易度が… 技術の横の繋ぎ合わせも含めて学習したい 繋げ方がわからない CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 11

Backend Ruby on Rails, Nginx Frontend Next.js Infra Docker, AWS (ECS Fragate), GithubAction 参考資料: https://zenn.dev/ddpmntcpbr/books/rna-hands-on 技術スタック CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 12

Zennのような投稿サイトを制作 この資料を使えばよくある技術が一通り体験できる 難易度は高そうだが、やりがいは大きそう AWSへのデプロイ方法、CI / CD パイプラインも学べる！ お得すぎて、すぐ飛びつきました！ 選んだ理由 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 13

2. 本題 14

CI…Continuous Integration (継続的インテグレーション) コード変更を共有ソースコードリポジトリに自動的かつ頻繁に取り込む手法 CD…Continuous Delivery/Deployment(継続的デプロイメント) 2 つの部分からなるプロセスで、コード変更の統合、テスト、デリバリーを 指します。継続的デリバリーは、本番環境への自動デプロイは行わずその手 前までを守備範囲としますが、継続的デプロイメントは、更新内容を本番環 境に自動的にリリースします。 参考先：https://www.redhat.com/ja/topics/devops/what-is-ci-cd CI / CD パイプライン CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 15

よくわからん 16

CI Githubへpushすると、変更マージ、ビルド、テストを自動化 CD CIの動作に加え、人の操作をトリガーにデプロイ・リリースを自動化 DockerコンテナをGithub Actionで作成し、AWSへ送信 要するに CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 17

詰まり個所 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 18

コンテナ化に失敗している 19

#14 11.85 Attempted to load @next/swc-linux-x64-gnu, but an error occurred: /app/ #14 11.85 Attempted to load @next/swc-linux-x64-musl, but an error occurred: /app/ #14 12.03 ⨯ Failed to load SWC binary for linux/x64, see more info here: #14 12.06 > Build error occurred SWC関連でエラーが出ていました エラー内容 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 20

3. 原因と対策 21

ローカル動作はどうか？ Macではデプロイまで可能、WSLでは不可 CPU環境が関係している？ 検証 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 22

設定を変更 next.json.js module.exports = { swcMinify: false } .babelrc { "presets": ["next/babel"] } 試したこと CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 23

直らず… 24

#14 12.03 ⨯ Failed to load SWC binary for linux/x64, see more info here: Linux/x64 の記載がある！ このSWCはnode_moduleディレクトリにある node_moduleのサイズが670MBもある これをGithubにアップロードするものなのか？ エラーを見直す CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 25

node_moduleは環境ごとに生成するもの githubにアップロードしてはいけないのが通例 知らなかった… 解決 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 26

.gitignore を編集 # 指定のディレクトリを除外する node_modules 通常は自動的に生成されるが、なぜかファイルがなかった… ディレクトリ移動時に削除してしまったのかもしれません 対策 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 27

4. AWSで掛かったコスト 28

AWSでよくクラウド破産した話を聞きます。 今回かかったコストについて紹介します！ パケ死 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 29

5/24 AWS 1570円 5/31 AWS 524円 7/2 AWS 5963円 8/2 AWS 1036円 合計 ９０９３円　← 少々高額？ 終わったら必ず削除しましょう！ 費用 CI / CD パイプラインで詰まった話　2025.02.20 須藤 裕太 30

ありがとうございました よければ X で友達になってください！ 31