Vercel と Heroku を使用した最初のフルスタック アプリケーションのデプロイ

フルスタック アプリケーションのデプロイは、特にこのプロセスに慣れていない場合には、複雑に感じるかもしれません。ただし、Vercel や Heroku などのプラットフォームを使用すると、フロントエンドとバックエンドを個別にデプロイおよび管理することが簡単になります。このガイドでは、フロントエンドを Vercel でホストし、バックエンドを Heroku でホストする、基本的なフルスタック アプリケーションをデプロイする手順を説明します。

Vercel と Heroku を使用する理由

ヴェルセル:

• Next.js、React、Angular などのフロントエンド フレームワーク用に最適化されています。
• Git 統合によるシームレスな継続的デプロイメントを提供します。
• グローバル エッジ キャッシュを提供してパフォーマンスを高速化します。

Heraku:

• バックエンド サービスと API をデプロイするための多用途プラットフォーム。
• 環境変数とデータベース統合によるセットアップが簡単です。
• 初心者向けの無料枠オプションにより、適切に拡張できます。

前提条件
始める前に、次のものが揃っていることを確認してください。

1. Git がインストールされており、バージョン管理の基本を理解している。
2. フロントエンド プロジェクト (React、Next.js など) とバックエンド プロジェクト (Node.js、Express など)。
3. Vercel と Heroku のアカウント。
4. Node.js と npm がローカル マシンにインストールされています。

ステップ 1: フロントエンド コードを準備する

1.1 フロントエンド リポジトリを初期化する
まだプッシュしていない場合は、フロントエンド プロジェクトを Git リポジトリ (GitHub、GitLab など) にプッシュします。

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

1.2 デプロイメント用にフロントエンドを最適化する
フロントエンド プロジェクトが本番環境に対応していることを確認してください:

• Next.js や React などのフレームワークの npm run build を実行して、最適化された運用ビルドを作成します。
• 環境変数 (API URL など) が .env.local に設定されているか、Vercel ダッシュボードに直接設定されていることを確認してください。

ステップ 2: フロントエンドを Vercel にデプロイする

2.1 Vercel に接続する

• Vercel にログインします。
• 「新しいプロジェクト」をクリックして、Git リポジトリをインポートします。

2.2 導入設定を構成する

• 正しいフレームワーク プリセット (Next.js、React など) を選択します。
• 必要な環境変数 (REACT_APP_API_URL など) を追加します。

2.3 フロントエンドのデプロイ
「デプロイ」をクリックすると、残りは Vercel が処理します!

• デプロイ後、フロントエンドのライブ URL を受け取ります。
• 例: https://your-project.vercel.app。

ステップ 3: バックエンド コードを準備する

3.1 バックエンド リポジトリを初期化する
バックエンド プロジェクトを別の Git リポジトリにプッシュします:

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

3.2 Procfile を追加する
Heroku は Procfile を使用してアプリケーションの実行方法を定義します。プロジェクトのルートに Procfile を作成します:

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

index.js をエントリ ポイント ファイルに置き換えます。

3.3 環境変数を設定する
必要なすべての環境変数 (データベース URL、API キーなど) が .env に保存されていることを確認します。 Heroku では、後からダッシュボードでこれらを設定できます。

ステップ 4: バックエンドを Heroku にデプロイする

4.1 Heroku アプリを作成する

1. Heraku にログインします。
2. 「新規」→「新しいアプリを作成」をクリックします。
3. アプリの一意の名前と地域を選択してください。

4.2 バックエンドのデプロイ

1. 「デプロイ」タブに移動します。
2. GitHub リポジトリに接続します。
3. 自動デプロイを有効にするか、「ブランチのデプロイ」をクリックして手動でデプロイします。

4.3 環境変数の設定
[設定] タブで、環境変数を追加します:

• 例: DATABASE_URL、SECRET_KEY。

ステップ 5: フロントエンドとバックエンドを接続する
Heroku バックエンドを指すようにフロントエンド プロジェクトを更新します:

• バックエンド URL を環境変数として設定します:z

web: node index.js  

• フロントエンド コードで、ハードコードされた API URL を process.env.REACT_APP_API_URL に置き換えます。

REACT_APP_API_URL=https://your-backend-app.herokuapp.com  

ステップ 6: テストとデバッグ

1. Vercel からフロントエンド URL にアクセスし、API 呼び出しを含むすべての機能が動作することを確認します。
2. Heraku のログを使用してバックエンドの問題をデバッグします。

const response = await fetch(`${process.env.REACT_APP_API_URL}/api/endpoint`); 

1. Vercel のビルド ログで展開関連の問題がないか監視します。

ベストプラクティス

1. バージョン管理: 開発には Git ブランチを使用し、テスト後にのみ変更をマージします。
2. エラー処理: デバッグに役立つ適切なエラー応答をバックエンドに実装します。
3. HTTPS: Vercel と Heroku の両方の URL で安全な通信のために HTTPS が使用されていることを確認します。
4. CORS: バックエンドで CORS ポリシーを構成し、フロントエンド URL からのリクエストを許可します。

結論
Vercel と Heroku を使用したフルスタック アプリケーションのデプロイは簡単で初心者にも優しいです。 Vercel がフロントエンドを処理し、Heraku がバックエンドを強化することで、インフラストラクチャについて心配するのではなく、機能の構築に集中できます。

今すぐデプロイを開始して、プロジェクトを実現しましょう! ?

以上がVercel と Heroku を使用した最初のフルスタック アプリケーションのデプロイの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。