PR

【実践】フロントエンド（Xserver） + バックエンドVPS(AWS EC2) でwebアプリケーション を開発・デプロイ

1. WSL で開発ディレクトリを作成

WSL 内のホームディレクトリで開発するのも良いですが、Windows 側のフォルダと連携するとファイル管理がしやすいです。

まず、WSL から Windows のプロジェクトフォルダ (D:\local-project\app) に移動しましょう。

cd /mnt/d/local-project/app

ls コマンドでフォルダが表示されるか確認してください。

2. Next.js (フロントエンド) のセットアップ

① Node.js をインストール

まず、Node.js をインストールします。

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

バージョン確認：

node -v
npm -v

② Next.js プロジェクトを作成

npx create-next-app@latest frontend
cd frontend

npx create-next-app@latest frontend コマンドを実行すると、プロジェクトを作成する際にいくつかの選択肢が表示される場合があります。その際、以下の選択肢について説明します。

  1. Typescript or JavaScript:
    • JavaScript: 一般的な JavaScript を使ったプロジェクトを作成します。特にタイプセーフティを気にせず、素早く開発を進めたい場合に選びます。
    • TypeScript: 型情報を使って開発を行う、より堅牢でエラーチェックが厳格な環境です。大規模なアプリケーションを作成する場合や、エラーハンドリングを強化したい場合に適しています。
  2. CSS, Sass, Styled Components など:
    • CSS: 標準的な CSS ファイルを使ったスタイリング。特に他のツールを使わずにシンプルなスタイリングをしたい場合に選びます。
    • Sass: より効率的に CSS を書くためのツール（SCSS 記法など）を使いたい場合に選びます。
    • Styled Components: CSS-in-JS のスタイルライブラリで、React コンポーネント内で直接スタイルを定義したい場合に選びます。
  3. ESLint:
    • Yes: コード品質を保つために ESLint をプロジェクトに組み込みます。コードの整合性やエラーを静的にチェックするツールです。
    • No: ESLint を使わずに進めます。
  4. Prettier:
    • Yes: コードの整形ツールである Prettier をプロジェクトに組み込みます。コードの見た目を統一し、手動での整形作業を減らしたい場合に選びます。
    • No: Prettier を使わずに進めます。
  5. Testing Library or other testing frameworks:
    • Yes: テスト環境を作成する場合、Testing Library や Jest を使ったセットアップを選択できます。
    • No: テスト環境を作成しない場合に選びます。

もしあらかじめ使用する技術が決まっていない場合は、以下のように選んでおくと良いでしょう

Would you like to use TypeScript?

→ No (TypeScript を使いたくない場合は「No」を選択。TypeScript を使いたい場合は「Yes」を選択)

Would you like to use ESLint?

→ Yes (コードの品質向上のために ESLint を使うのは良い選択です。)

Would you like to use Tailwind CSS?

→ Yes (Tailwind CSS は非常に人気のあるユーティリティファーストの CSS フレームワークです。デザインにこだわる場合は「Yes」を選択)

Would you like your code inside a src/ directory?

→ No (「src/」ディレクトリを作りたい場合は「Yes」を選択することもできますが、デフォルトで問題ない場合は「No」にしておきましょう)

Would you like to use App Router? (recommended)

→ Yes (App Router は Next.js 13 以降の推奨のルーティング方法です。)

Would you like to use Turbopack for next dev?

→ No (Turbopack は新しいバンドラーで、現在は実験的な機能のため、安定性を重視する場合は「No」を選択。)

Would you like to customize the import alias (@/* by default)?

→ No (エイリアスをカスタマイズしたい場合のみ「Yes」を選んでください。特に必要なければ「No」にしておきましょう。)

これらはプロジェクトを始める際の基本的な選択肢です。

インストールが終わったら、開発用サーバーを起動：

npm install
npm run dev

ブラウザで http://localhost:3000 にアクセスし、Next.js のデフォルトページが表示されるか確認してください。

3. FastAPI (バックエンド) のセットアップ

① Python & venv のインストール

sudo apt update
sudo apt install -y python3 python3-venv python3-pip

バージョン確認：

python3 --version
pip3 --version

② FastAPI プロジェクトを作成

cd ..
mkdir backend
cd backend
python3 -m venv venv
source venv/bin/activate
pip install fastapi uvicorn

main.py を作成

nano main.py

from fastapi.middleware.cors import CORSMiddleware
from fastapi import FastAPI

app = FastAPI()

# CORS設定
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # または、フロントエンドのURLを指定することもできます
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# ルートの定義
@app.get("/")
async def read_root():
    return {"message": "Hello World"}

③ ローカルサーバーを起動

uvicorn main:app --reload --host 0.0.0.0 --port 8000

ブラウザで http://localhost:8000 にアクセスし、FastAPI の JSON レスポンスが表示されるか確認してください。

4. Next.js と FastAPI の接続

① Next.js 側に API を設定

frontend/.env.local を作成して、FastAPI のエンドポイントを登録：

NEXT_PUBLIC_API_URL=http://localhost:8000

Next.js で API を取得：frontend\src\pages\index.jsに記載

import { useEffect, useState } from 'react';
import axios from 'axios';

const Home = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const fetchMessage = async () => {
      try {
        const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/`);
        setMessage(response.data.message);
      } catch (error) {
        console.error("Error fetching message:", error);
      }
    };
    fetchMessage();
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

export default Home;

5. Xserver に Next.js をデプロイ

次に、Xserver のサブドメイン (ai.neumannlab.online) に Next.js をデプロイしましょう。

① Next.js を静的サイト化

cd frontend
npm run build
npm run export

すると、frontend/out/ フォルダが生成されます。

② SFTP で Xserver にアップロード

  1. Xserver の管理画面 → 「サーバー管理」 → 「ドメイン」 → 「サブドメイン設定」
  2. ai.neumannlab.online に対応するフォルダ (public_html/ai/) を確認
  3. FileZilla や WinSCP で out/ の内容を public_html/ai/ にアップロード

アップロードが完了したら、https://ai.neumannlab.online でアクセス確認してください。

6. FastAPI を VPS にデプロイ

Xserver では Python（FastAPI）は動かせないため、VPS（さくらVPS や AWS EC2 など）を使います。

  1. VPS に FastAPI を転送
scp -r backend/ user@your-vps:/home/user/backend
ssh user@your-vps
  1. VPS で FastAPI を起動
cd backend
source venv/bin/activate
uvicorn main:app --host 0.0.0.0 --port 8000 --reload
  1. nginx でリバースプロキシ設定
sudo nano /etc/nginx/sites-available/backend

server {
    listen 80;
    server_name backend.neumannlab.online;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

nginx を再起動：

sudo ln -s /etc/nginx/sites-available/backend /etc/nginx/sites-enabled/
sudo systemctl restart nginx

これで https://backend.neumannlab.online で FastAPI が動作します。

7. まとめ

✅ ローカル開発環境

  • Next.js (http://localhost:3000)
  • FastAPI (http://localhost:8000)

✅ Xserver にデプロイ

  • ai.neumannlab.online に Next.js (SSG)
  • backend.neumannlab.online に FastAPI (VPS)

これで、Xserver + VPS で AI Blog Writer を開発・デプロイ できます！ 🚀

コメント

タイトルとURLをコピーしました