UnleashZealUpliftPersevereOvercomeDrive

HTML/CSS/JavaScriptで作成したポートフォリオサイトをAzure Static Webappで公開する

最近、HTML、CSS、JavaScriptを使ってポートフォリオサイトを作成し、このポートフォリオサイトをインターネット上で公開するために、Azure Static Web Appsを利用しました。
今回は、Azure Static Web Appsを使って、ローカルで作成したポートフォリオサイトを公開する手順を紹介します。

1. Azure Static Web Appsとは？

Azure Static Web Appsは、静的コンテンツ（HTML、CSS、JavaScript、画像ファイルなど）を簡単にホスティングするためのサービスです。
GitHubと連携して、自動的にデプロイと更新が行えるのが特徴です。以下の利点があります。

  • 簡単なセットアップ: ローカルで作成した静的サイトを簡単に公開可能。
  • 無料プランの利用: 小規模なサイトであれば無料でホスティング可能。
  • CI/CD統合: GitHubのリポジトリと連携し、プッシュ時に自動デプロイ。

2. 前提条件

Azure Static Web Appsを使ってポートフォリオサイトを公開するためには、以下のアカウントなどが必要です。

  1. Azureアカウント: まだ持っていない場合は、Azure無料アカウントを作成できます。
  2. GitHubアカウント: 静的サイトをホスティングするために必要です。
  3. ローカルで作成したポートフォリオサイト: HTML、CSS、JavaScriptで作成したサイトのファイルが必要です。

3. GitHubリポジトリの作成

3.1 リポジトリの作成

GitHubにログイン後、右上の「＋」ボタンをクリックし、「New repository」を選択します。
リポジトリ名を入力し、「Create repository」ボタンをクリックします。

3.2 ローカルのファイルをプッシュ

ローカルのポートフォリオサイトのディレクトリに移動します。 以下のコマンドを実行して、リモートリポジトリにファイルをプッシュします。

git init
git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git
git add .
git commit -m "<任意のメッセージ>"
git push -u origin main

4. Azure Static Web Appsの設定

4.1 AzureポータルでStatic Web Appの作成

Azureポータルにアクセスし、サインインします。
「Static Web Apps」と検索し、「Static Web Apps (Preview)」を選択します。

「Create」をクリックし、以下の情報を入力します。

  • Subscription: サブスクリプションを選択。
  • Resource Group: 新しいリソースグループを作成、または既存のグループを選択。
  • Name: 静的ウェブアプリの名前を入力（ユニークな名前を選択）。
  • Region: 利用するリージョンを選択。

Deployment details:

  • Source: GitHub を選択。
  • Organization: GitHubアカウントを選択。
  • Repository: ポートフォリオサイトのリポジトリを選択。
  • Branch: mainブランチを選択。
    「Review + create」ボタンをクリックし、設定を確認してから「Create」をクリックします。

4.2 ビルドとデプロイ設定の確認

Azure Static Web Appsでは、デプロイ時にGitHub Actionsを使用して自動的にビルドとデプロイを行います。
app_locationやoutput_locationの設定が正しいことを確認しておきましょう。

app_location: "/"
output_location: "/"

デフォルトでは、プロジェクトルートを"/"として、ビルド結果の出力先も/に指定します。
必要に応じて、これらのパスを調整します。

5. デプロイの確認

デプロイが完了すると、Azureポータルの「Static Web Apps」のページから、サイトのURLを確認できます。URLにアクセスし、サイトが正常に表示されていることを確認しましょう。

6. 更新と自動デプロイ

ポートフォリオサイトに変更を加えた場合は、GitHubリポジトリにプッシュするだけで自動的にAzure Static Web Appsがデプロイを行います。
これにより、手軽にサイトを更新できます。

まとめ

実際にAzure Static Web Appsを利用してい見ると、簡単に静的サイトを公開できる非常に便利なサービスでした。
今回の手順が参考になりましたら幸いです。

← TOP