Azure App Serviceと GitHubを連携してみた 株式会社セゾンテクノロジー 佐藤泰志

自己紹介 ▪ 名前 佐藤泰志（さとうやすし） ▪ 出身地 山形県 ▪ 職歴 運用保守（約7年）、システム開発（約2年）、 要件定義、設計（約４年） 2022年 セゾンテクノロジー中途入社 DX推進PJ参画 2023年 システム開発、 DX推進PJ支援、Azure運用業参画 2024年 航空システムテスト、システム開発、AWS運用業務参画

はじめに 以下の流れで実施した内容をまとめています。 ●プロジェクトのセットアップ ●コーディング（Java） ●GitHubへのプッシュ ●Azure Portalでの動作確認 特に苦労した点や成功した点を振り返りながら、 同様の課題に取り組む方々へ参考になればと思います。

取り組み当初 の状態 ●コマンドプロンプトでのGit操作が不明 コマンドプロンプトでのgitの使い方が分からず、 実行方法の調査や、コマンドの動作確認に時間がかかりました。 ●そもそもAzureとGitHubの連携方法が不明 AzureとGitHubをどのように連携するのか分からず、 設定方法の調査と調査後の動作確認を行うまで手間取りました。

Azure App Service とは？ ●Microsoftが提供する「クラウドで簡単にWebアプリを作成、ホスト、管理で きるPaaSサービス」です。 ●特徴として以下があります。 ・簡単なデプロイ: Webアプリを数クリックで公開できる。 ・自動スケーリング: 使用状況に応じてサーバーを自動で増減する。 ・多言語対応: PHP、Python、Node.js、Javaなど、 複数の言語に対応。 ・セキュリティ機能: Azureのセキュリティを利用して、安全にアプリを運用。 ●イメージ アプリをすぐに展開できるプラットフォームのようなもので、 面倒なダウンロードや管理なしでサポートしてくれるイメージです。

GitHub とは？ ● GitHubは「コードを管理し、誰でも協力して開発できるためのオンラインプ ラットフォーム」です。 ●特徴として以下があります。 ・バージョン管理: コードの変更履歴を自動で記録。 ・共同作業: 複数の開発者が同時に作業し、コードをまとめられる。 ・オープンソース: 誰でも参加できるプロジェクトが多数。 ・プルリクエスト: 特定の変更を提案し、他の開発者との 協力を可能にする機能。 ●イメージ 「協力してコードを作る工房」のようなもので、世界中の開発者が アイディアを共有し、一緒に進化していくことが出来るイメージです。

連携用ファイル の準備 以下を実施しています。 ●プロジェクトフォルダの作成（ my-java-appの作成 ） ●index.jsp / web.xmlの作成（ Hello, Azure App Service! を表示） ●mvnコマンドでプロジェクトの作成 ●mvnコマンドアプリケーションのビルド（ my-java-app.warの作成） ●コマンドプロンプトでGitHubへのコミットとプッシュ

連携用ファイル の配置 ● Azureと連携するファイルとして、GitHubへ上記プッシュしています。

App Service 作成 ● Azureポータルへ接続 ● Marketplaceで「Webアプリ」をクリック Marketplaceで「Webアプリ」 「App Service」で検索すると 表示されます

App Service 作成 画面キャプチャを貼る ●各項目を記載し、 「確認および作成」をクリック する

App Service 作成 ● 「作成」をクリックする ●デプロイ完了後、「リソースに 移動」をクリックする

App Service 作成 ● 「既定のドメイン」をクリックする

App Service 作成 ● App Serviceが起動していることを確認

● 「デプロイセンター」をクリックする ●ソースのプルダウンメニューから「GitHub」をクリックする デプロイ設定 デプロイセンターを開く事が 分かるまでに2日程かかりました

●各項目を設定する デプロイ設定 この設定で落ち着くまでに 3時間程調査しました

デプロイ設定 ● 「アプリに対して SCM 基本認証が無効になっています。」の メッセージをクリックする ● 「SCM基本認証の発行資格」をオンにする この設定で落ち着くまでに さらに1時間程かかりました

●SCM基本認証 Azure App Serviceへ、GitHubやFTPを通じて、 アプリケーションへアクセスする際の認証方法です。 ●ユーザー割り当てID Azure上のリソースにおいて、特定のユーザーに 対してアクセス権を設定するための機能のことです。 デプロイ設定

デプロイ設定 ● 「保存」をクリックする ●デプロイセンター画面で「概要」をクリックする 一度保存を忘れてしまい やり直ししました

App Service 動作確認 ● App Service画面で、「既定のドメイン」をクリックする ●画面が表示されたことを確認

まとめ Azure App ServiceとGitHubを連携する過程で、 さまざまな課題に直面しましたが、自分なりにクリアすることで、 得られた経験は大きな財産となりました。 今回実施した経験を基に、次回はさらに効率よく進められるようにしたいと 考えており、今後も挑戦していきます。

Appendex

プロジェクト ディレクトリの 構成 ●今回は以下のフォルダ構成としました。 my-java-app/ ├── WEB-INF/ │ └── web.xml └── index.jsp

index.jsp の中身 ●今回作成したindex.jspの中身です。 ●タイトル、ブラウザに文字列が表示されるだけの単純なWeb アプリケーションになりますが、気合入れて作りました。 <%@ page contentType="text/html; charset=UTF-8" language="java" %> My Java Web App

Hello, Azure App Service!

Hello World Azure App Service

ここがブラウザで 表示されます

web.xml の内容 ● web.xmlの中身です。 ●ソースコードをどのように動作させるかをマッピングするファイルです。 今回で言うと、リクエスト処理時に、index.jspが処理されるように記載しています。 jsp /index.jsp jsp /index.jsp ここでjspを定義しています ここでindex.jspが処理 されるようにマッピングしてい ます

プロジェクト の作成 ● Javaを簡単にビルドして動作させるために、以下のMavenコマンドを実行 しました。 mvn archetype:generate -DgroupId=com.example.app - DartifactId=my-java-app -DarchetypeArtifactId=maven- archetype-webapp -DinteractiveMode=false ● Mavenは、Javaプロジェクトを構築（ビルド）、フォルダ構成管理、ツール やライブラリの依存関係の自動管理を行うためのツールです。 ●上記コマンドの実行により、指定したグループ名（com.example.app） とプロジェクト名（my-java-app）を持つWebアプリのフォルダ構成を自動 的に作成しました。 フォルダ階層とxmlなどを 作成するだけなので すんなり通りました

アプリケーショ ンのビルド ● GitHubへプッシュするためのパッケージ作成のため、以下のコマンドを 実行しました。 mvn clean package ●上記のコマンドを実行することで、もし古いビルドファイルがあれば整理 し、新しいビルドファイルとしてをパッケージとして作成することになります。 ●今回実行した結果、「my-java-app.war」というパッケージが作成 されました。 warファイル作成時のフォルダの参 照エラー等、エラーが多く解消まで 1日程かかりました

GitHubへの プッシュ ●コマンドプロンプトにて、以下のコマンドを順番に実行し、 作成した資材をGitHubへプッシュしました。 git status git init git add . git commit -m "Add initial Java application files" git remote add origin https://github.com/Yasushi- Satou/my-java-ap git push -u origin master git status git log P.8の状態になりました Gitコマンドが分かるまで 2時間ほどかかりました

ご清聴ありがとうございました