Azure App ServiceとGitHubを連携してみた

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"
%> <!DOCTYPE html> <html> <head> <title>My Java Web App</title> </head> <body> <h1>Hello, Azure App Service!</h1> <p>Hello World Azure App Service</p> </body> </html> ここがブラウザで表示されます

web.xml の内容 • web.xmlの中身です。 •ソースコードをどのように動作させるかをマッピングするファイルです。今回で言うと、リクエスト処理時に、index.jspが処理されるように記載しています。 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema- instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>jsp</servlet-name> <jsp-file>/index.jsp</jsp-file> </servlet> <servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>/index.jsp</url-pattern> </servlet-mapping> </web-app> ここで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時間ほどかかりました

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

Azure App ServiceとGitHubを連携してみた

Azure App ServiceとGitHubを連携してみた

佐藤泰志

Other Decks in How-to & DIY

Featured

Transcript