春、Orbを使ってみよう

スライド概要

2022年4月1日開催のCircleCI もくもく会 #12 「春、Orbを使ってみよう」で使用したスライドです。

profile-image

Masahiko Funaki

@mfunaki933

作者について:

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2022-04-01 04:04:00

各ページのテキスト

1. CircleCI もくもく会 #12 春、Orbを使ってみよう 2022年3月24日 12:00~12:50 感想・質問ハッシュタグ -> #CircleCIJp 1

2. アジェンダ 時間 内容 11:50- 開場(オンライン) 12:00-12:05 オープニング 12:05-12:35 今夜、Orbを使ってみよう (Twitter #CircleCIJp でツイート または Zoom Chatにて) 12:35-12:45 質疑応答 (Twitter #CircleCIJp でツイート または Zoom Chatにて) 12:45-12:50 クロージング ※時間配分は予定なく変更の可能性があります。 ※途中参加、途中退席も大歓迎!ゆるーく集まりましょう。チャットに入りました/出ますメッセージを残して いただけるとありがたいですが、必須ではないです(無理なさらずに)。 ※昼食の時間です。飲食物の持ち込み・食べながらの参加は自由です。ただし、食べる音が大きい場合は、 音声を一時的にミュートにしてください。 2

3. CircleCIもくもく会とは ゆる~く集まって CircleCI をネタに 「もくもく」する会です。 食事や途中入退室自由、 顔出し・お話・チャットできない 状況ありの前提で進めましょう。 3

4. Today’s MC 舟木将彦 (@mfunaki) CircleCI Senior Developer Advocate。 #CircleCIJp 中の人として、 - Twitter (https://twitter.com/CircleCIJapan) Facebook (https://www.facebook.com/groups/CircleCIJP) Blog (https://circleci.com/ja/blog/author/masahiko-funaki/) discuss (https://discuss.circleci.com/tag/ja-%E6%97%A5%E6%9C%A C%E8%AA%9E) やイベント等で発言を続ける。 Dejima(Siriの前身)でのプロダクト開発や、Sybaseでのサービス開発、 SAPやMicrosoftでのコンサルティングを経て、CircleCIでは、 「やりたいことをソフトウェアとして早く+品質高く実現する」ことをご支援さ せていただいております。 4

5. ということで... 5

6. 春、Orbを使ってみよう 6

7. CI/CDで自動化って言うけれど、自分でやった方が早くね?

8. 開発メンバーを跨いでみんなの再利用性を高める CI/CDの設定(コンフィグ, config.yml)を書くのは結構大変 (CircleCI = コンピュータは人間ほど融通が効かない、つまり、人が読むための 作業手順書よりは「ちゃんと」書かないといけない) → とはいえ、同じ言語や同じプラットフォームでは使い回しがきく箇所が多い → プロジェクトに関わる期間が長いほど、過去のノウハウが手元に蓄積されて、 割と「サクっと」設定できる 過去のノウハウ(うまくいった実績、ベストプラクティス)を、 ● 個人の手元にではなく、みんな(社内、社外)で共有 ● コンフィグ全体ではなく、部品として再利用可能な形で共有 すれば、ソフトウェア開発の質と速度を今よりもう一段、アップできるのでは?

9. Orb - 効率化+品質/セキュリティ/コンプライアンスツールとの連携 効率化 セキュリティ/ コンプライアンス 効率化 品質 品質/ コンプライアンス 効率化 9

10. 説明よりも実際に使ってみよう!

11. 1. Node.js + Express でサンプルアプリ構築 1. 2. 3. 4. 5. GitHub 上に空プロジェクトを作成し、 ローカルに clone しておく (cci-use-orbs) npm install して package.json (や app.js) を生成 express –view=ejs で Express を使っ たサンプル構築 npm start して、 ブラウザで http://localhost:3000/ に アクセスして動作確認 問題なければ GitHub リポジトリに反映 https://github.com/mayoct/cci-use-orbs/tree/step01

12. 2. CircleCI でコンテナ作成を自動化する(1) 1. 2. プロジェクトに .circleci ディレクトリを作 成し、 config.yml ファイルを 用意 config.yml ファイルに docker build コマンドを実行する ための記述を追加 https://github.com/mayoct/cci-use-orbs/tree/step02

13. 2. CircleCI でコンテナ作成を自動化する(2) 3. 4. Dockerfile を用意し、 コンテナ作成のための定義を用意 .dockerignore ファイルで対象外に ○ ○ 5. node_modules npm-debug.log ローカル Docker 環境でテスト ○ ○ ○ docker build . -t <name>/<appname> docker run -p 49160:3000 \ -d <name>/<appname> http://localhost:49160 https://github.com/mayoct/cci-use-orbs/tree/step02

14. 2. CircleCI でコンテナ作成を自動化する(3) 7. 問題なければリポジトリに反映、および CircleCI のプロジェクトとして設定 https://github.com/mayoct/cci-use-orbs/tree/step02

15. 3. CircleCI で Heroku にコンテナをデプロイする(1) 1. 2. 3. Heroku のアカウントを用意し、 Heroku CLI をインストール https://devcenter.heroku.com/ja/articles/he roku-cli Container Registryにログイン heroku container:login Heroku アプリ(cci-use-orbs)を作成 heroku create cci-use-orbs 詳しくは https://devcenter.heroku.com/ja/article s/container-registry-and-runtime Amazon Elastic Container Registry (ECR) も 同様(かつ circleci/aws-ecr Orbあり) https://github.com/mayoct/cci-use-orbs/tree/step03

16. 3. CircleCI で Heroku にコンテナをデプロイする(2) 4. config.yml の内容を更新 https://github.com/mayoct/cci-use-orbs/tree/step03

17. 3. CircleCI で Heroku にコンテナをデプロイする(3) 5. CircleCI でプロジェクトの 環境変数を設定 https://github.com/mayoct/cci-use-orbs/tree/step03

18. 3. CircleCI で Heroku にコンテナをデプロイする(4) 6. ワークフローを実行 ○ ○ ○ 7. コンテナのビルド レジストリへの登録 デプロイ デプロイされたウェブアプリに アクセスできることを確認 https://github.com/mayoct/cci-use-orbs/tree/step03

19. https://youtu.be/T9mr3LudDdQ

20. https://circleci.com/ja/signup/ https://support.circleci.com/hc/ja 20

21. 活用いただいているお客様+事例 https://discuss.circleci.com/t/advent-calendar-2021-circleci/42147

22. ハードウェアのシリコンバレー 中国深圳では 時は金なり 効率は生命なり 22

23. CircleCIをもっと知りたい!人に... 最新の情報なら @CircleCIJapan をフォロー! #CircleCIJp タグつけて情報共有! 動画でCircleCIについて学ぶなら CircleCIチャンネルを登録! (日本語プレイリストもあり ) イベント、セミナー、勉強会の情報なら connpassのCircleCIグループから! https://circleci.connpass.com/

24. 質疑応答 24

25. Thank you! 今後のイベント情報通知を登録して自動化しよう!→ https://circleci.connpass.com/ 25