🎾

Azure VMでDocker化されたVue製TODOアプリを公開する

に公開
Docker
Azure
Vue.js
nginx
デプロイ
tech

1. イントロダクション：今回作るもの

こんにちは！クラウドエンジニアリングを学ぶ中で、開発したアプリケーションを実際に公開するまでの工程は非常に重要だと思います。
本記事では、フロントエンドフレームワークの定番であるVue.jsで作成したシンプルなTODOアプリケーションを、Azure仮想マシン (VM) 上にDockerとNginxを使ってデプロイし、インターネットに公開する手順を解説します。

  • 今回のテーマ: Vue.jsで完結するSPA（Single Page Application）のデプロイ
  • 目標: Docker環境を通じて、最小限のAzureリソースでWebサイトを公開する。

2. インフラ構成の解説：VueとDocker Compose

今回採用する構成は、非常にシンプルです。

要素 技術 役割
アプリケーション Vue.js ブラウザ側で動作するTODOアプリ本体。今回はビルド後の静的ファイルを扱います。
Webサーバー Nginx Dockerコンテナとして動作し、Vueアプリの静的ファイル（HTML, CSS, JS）を配信します。
オーケストレーション Docker Compose Nginxコンテナを定義・起動し、設定を一元管理します。

Dockerの役割

Vueアプリは事前に静的ファイルにビルドします。このビルドされたファイルをNginxコンテナ内に配置することで、ホストOS（Azure VM）の設定に依存しない、移植性の高いWebサーバーが完成します！！！

3. Azureの使用技術の紹介

Webサイトを公開するために、Azureで以下のリソースを使用します。

  • 仮想マシン (VM) (Ubuntu): Webサーバー（Docker）を実行するためのOS環境を提供します。
  • 仮想ネットワーク (VNet): VMを配置するプライベートなネットワーク空間です。
  • ネットワーク セキュリティ グループ (NSG): 外部からのアクセスを制御するファイアウォール機能です。インターネット公開に必要なTCPポート80を制御します。

インフラ構成図

4. Azureへのデプロイ：リソース作成

Azure Portalから以下の手順でVMを作成します。今回は最小限の設定で進めます。

  1. リソースグループの作成: デプロイするリソースをまとめるグループを作成します。
  2. 仮想マシンの作成:
    • イメージ: Ubuntu 20.04 LTS (または最新版) を選択。
    • サイズ: Standard B1s など、最も安価なサイズで十分です。
    • 認証の種類: セキュリティ上、SSH公開キーを選択します。
    • ネットワーク設定: 新しい仮想ネットワークと、VMに接続するための**ネットワーク セキュリティ グループ (NSG)**が自動で作成されることを確認します。
  3. NSGの確認・設定:
    • 作成されたNSGの受信規則で、ポート80 (HTTP) が許可されていることを確認します。

Azure Portal上の操作画像の一部
ほぼデフォルトのままで、仮想マシンやネットワークのポートの設定を行います。
特にVNなどなければ新規作成します。



5. 仮想マシン内の設定とDockerデプロイ

任意の方法で、No4で作成した仮想マシンにログインし、Nginxコンテナを起動する準備をします。
（筆者は、Azure Portal上からログインしました。）

💻 ステップ 5-1. 開発ツールのインストール

VMにログイン後、GitHubからファイルをクローンするためにgit、およびコンテナ環境のためにdockerとdocker composeをインストールします。

sudo apt update

# gitのインストール
sudo apt install git -y

# Docker関連パッケージのインストール
sudo apt install docker-ce docker-ce-cli containerd.io docker-compose-plugin -y
# インストールできているのか確認
docker -v
# Dockerコマンドをsudoなしで実行可能にする
sudo usermod -aG docker $USER

# docker composeのインストール
sudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y
# インストールできているのか確認
docker compose version

💻 ステップ 5-2. アプリケーションとDocker Composeファイルの準備

GitHubからTODOアプリのコードと、Nginx設定を含むcompose.yamlをクローンします。

# GitHubからリポジトリをクローン（URLは適宜置き換えてください）
git clone https://github.com/your-username/todo-app-repo.git
cd todo-app-repo

💻 ステップ 5-3. アプリケーションのビルドとコンテナ起動

Vueアプリを静的ファイルにビルドし、compose.yamlで定義されたNginxコンテナを起動します。

  1. Vueアプリのビルド&コンテナの起動:
    Dockerfile内でVueアプリをビルドし、結果をNginxコンテナにコピーします。

    sudo docker compose up -d

6. 動作確認

VMのパブリックIPアドレスをブラウザに入力してアクセスします。

ブラウザでNginxのデフォルトページではなく、TODOアプリが表示されればデプロイ成功です！
（Nginxの設定でports: - "80:80"を設定しているため、http://[VMのパブリックIP]でアクセス可能です。）

※パブリックIPアドレスは、AzureのパブリックIPアドレスから確認可能

7. Azureリソースの削除（忘れずに！）

学習や検証が終わったら、意図しない課金を防ぐために必ずリソースを削除しましょう。

  1. Azure Portalで作成したリソースグループを開きます。
  2. リソースグループの削除を選択し、グループ名を正確に入力して実行します。

8. 今後の展望

今回は最も基本的なデプロイを行いましたが、この環境をさらに発展させていきたいと思っています。

  • backendの実装: 現状データを永続化できていないので、RDSを使用して永続化の対応
  • CI/CD: GitHub Actionsなどを利用し、mainブランチへのマージをトリガーに自動的にVMへデプロイする仕組みを構築する。

Discussion