0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Azure × LAMP】Bicepで構築する日記Webアプリケーション

Posted at

1. はじめに

1-1 ご挨拶

初めまして、井村と申します。

普段インフラエンジニアとして働いているのですが、基盤の作成、ミドルウェアのインストール、起動までがメインの業務になります。アプリケーションを載せて、フロントエンドからデータベースまでの構成を理解したく今回は自分検証用の日記アプリを作成しました。まずは動作するアプリが完成したため備忘録として残します。

2. 構築

インフラはBicepで構築します。ミドルウェアのインストールはcloud.initを利用します。
※cloud.initファイルはmain.bicepと同じフォルダに格納すれば自動的に読み込まれます。

20250805_004.png

1 . 資材をダウンロードします。

2 . Azureへログインします。

Azure CLI
az login

3 . リソースグループを作成します。

Azure CLI
az group create --name rg-diary-dev --location japaneast
# az group create --name <your resource group name> --location <location>

4 . 仮想マシンを作成します。

Azure CLI
az deployment group create --template-file main.bicep --resource-group rg-diary-dev --parameters adminPassword='P@ssw0rd1234!'
# az deployment group create --template-file main.bicep --resource-group <your resource group name> --parameters adminPassword='<login password for the Azure VM>'

5 . 仮想マシン作成後、terratermの[SSH SCP...]等でホームディレクトリにdiary-app.tar.gzをアップロードします。

6 . アプリケーションを所定の位置に展開します。

bash
sudo tar -xzvf ~/diary-app.tar.gz -C /var/www/html/

ディレクトリ構成は以下の通りです。

/var/www/html/diary-app/
├── index.php              # 投稿一覧ページ
├── config.php             # DB接続設定
├── db/init.sql            # データベース初期化SQL
├── css/style.css          # スタイル
├── entries/               # 投稿の作成・編集・削除
│   ├── create.php
│   ├── edit.php
│   └── delete.php
└── templates/             # ヘッダー・フッター共通部品
    ├── header.php
    └── footer.php

7 . 以下コマンドでMySQLの設定を行います。

bash
sudo mysql -u root

8 . 以下コマンドでrootユーザーのパスワード設定、データベース、テーブルを作成します。

sql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'P@ssw0rd1234!';
FLUSH PRIVILEGES;

CREATE DATABASE IF NOT EXISTS diary;
USE diary;

CREATE TABLE IF NOT EXISTS entries (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

exit

9 . サンプルページを削除します。

bash
sudo rm /var/www/html/index.html

10 . アプリケーションのコンフィグファイルを設定します。

bash
sudo vim /var/www/html/diary-app/config.php

# rootユーザーのパスワードを設定します。
$password = '<your_password_here>';

11 . Apacheを再起動します。

bash
sudo systemctl restart apache2

6 . ブラウザからアプリケーションにアクセスします。

http://<パブリックIPアドレス>/diary-app

7 . 日記を書いてMySQLデータベースにデータが格納されるか確認します。

20250802_001.png

20250802_002.png

20250802_003.png

bash
azureuser@vm-diary-dev:~$ sudo mysql -u root -p -D diary -e "SELECT * FROM entries;"
Enter password:
+----+-------+--------------+---------------------+
| id | title | content      | created_at          |
+----+-------+--------------+---------------------+
|  1 | Test  | Hello World! | 2025-08-02 01:18:54 |
+----+-------+--------------+---------------------+
azureuser@vm-diary-dev:~$

MySQLにデータが正常に格納されていることを確認できました。

3. 終わりに

本記事を最後まで読んで頂きましてありがとうございます。
Copilot先輩と試行錯誤しながらのアプリ開発は楽しかったです。今後はこのアプリを使用してインフラを改良していきたいです。

4. 参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?