1. インフラストラクチャの準備とセキュリティ設定

Alibaba CloudのECS（Elastic Compute Service）インスタンスを起動した後、最初にネットワークアクセスを制御するためのセキュリティグループを設定します。コンソールの「ネットワークとセキュリティ」から「セキュリティグループ」を選択し、以下のインバウンドルールを追加します。

2. サーバー管理パネル（BT Panel）の導入

サーバーの管理を効率化するため、CentOS環境にBT Panelをインストールします。SSHターミナルで以下のコマンドを実行します。

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

インストール完了後、表示される管理画面のURL、ユーザー名、パスワードを安全な場所に保管してください。セキュリティ向上のため、ログイン後はデフォルトのポート番号やログインパスを変更することが推奨されます。

3. 実行環境の構築

BT Panelのダッシュボードから、アプリケーションの実行に必要なミドルウェアをインストールします。

• Webサーバー: Nginx（リバースプロキシおよび静的ファイル配信）
• データベース: MySQL 5.7または8.0
• Java環境: Tomcatをインストールすることで、対応するJDKが自動的に構成されます。
• ツール: phpMyAdmin（データベース操作用）

4. Spring Bootアプリケーションのパッケージング

デプロイ前に、プロジェクトの環境設定（application.yml）をサーバー環境に合わせて修正します。

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/app_db_name?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Tokyo
    username: db_user
    password: secure_password_here

server:
  port: 9000

Mavenを使用して実行可能なJARファイルを作成します。pom.xmlにビルドプラグインが含まれていることを確認してください。

<build>
    <finalName>backend-service</finalName>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

コマンドラインで mvn clean package を実行し、target ディレクトリ内に生成された backend-service.jar をサーバーへアップロードします。

5. バックエンドの実行と永続化

アップロードしたJARファイルをバックグラウンドで実行します。プロセスの維持には screen または systemd を利用します。

# screenのインストール
yum install screen -y

# 新しいセッションの作成
screen -S webapp

# アプリケーションの起動
java -jar /www/wwwroot/java/backend-service.jar

セッションを抜けるには Ctrl + A + D を押します。プロセスを停止する場合は kill -9 [PID] を使用してください。

6. フロントエンド（Vue.js）のデプロイ

Vue.jsプロジェクトのルートディレクトリでビルドコマンドを実行します。

npm install
npm run build

生成された dist フォルダ内のコンテンツを、サーバーの /www/wwwroot/frontend などのディレクトリに転送します。

7. Nginxによるリバースプロキシ設定

ドメインまたはIPアドレスでアクセスした際に、フロントエンドとバックエンドが正しく連携するようにNginxの構成ファイルを編集します。

server {
    listen 80;
    server_name your_domain.com;

    # フロントエンド静的ファイル
    location / {
        root /www/wwwroot/frontend;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # バックエンドAPIへのプロキシ
    location /api/ {
        proxy_pass http://127.0.0.1:9000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

設定保存後、nginx -s reload を実行して反映させます。ブラウザから指定したドメインにアクセスし、アプリケーションが正常に動作することを確認してください。