ツイートアプリを作成しながら学習 1-3【Django + React】 💻Renderへのデプロイ手順💻

はじめに

本記事では、Django + React アプリをRenderにデプロイする方法について詳しく解説します。今回のデプロイでは、多くのエラー に遭遇し、それらを解決するためにさまざまな手順を試しました。

その経験を活かし、同じミスをしないようにするための手順書を作成しました。

本記事の目的

• Render へのデプロイ手順 を最初から最後まで詳しく解説
• エラーの原因と解決策 を記録し、今後の参考に
• Render の仕組みを理解し、どこを見ればよいかを明確にする
• 技術ブログとして公開し、他の開発者にも役立つ情報にする

目次

1. Renderとは？

2. デプロイの準備

3. データベースの設定 (PostgreSQL) とマイグレーション

4. Render にフロントエンド (React) をデプロイ

5. Render にバックエンド (Django) をデプロイ

6. 環境変数の設定 (SECRET_KEY, DATABASE_URL)

7. 今後の改善点と学び

Renderとは？

Render は、サーバーレスでアプリケーションをデプロイできる PaaS (Platform as a Service) です。

特徴

• 簡単にデプロイ可能 → GitHub 連携で簡単にデプロイできる
• バックエンド・フロントエンド・データベースをまとめて管理できる
• 環境変数 (SECRET_KEY など) を設定しやすい
• 無料プランあり → 小規模な開発では十分

デプロイの準備

デプロイをスムーズに進めるため、以下の準備を行う。

1.GitHubリポジトリの準備

• .gitignore に .env や node_modules を追加

2.Docker の設定 (Render は Docker にも対応)

• Dockerfile を作成し、アプリをコンテナ化

3.環境変数を .env に記述

開発時はここを読み込んでDEBUG=True、DATABASE_URL="sqlite:///db.sqlite3"
とします。

# backend/.end

DJANGO_SECRET_KEY="xxxxxxxx"
DEBUG=True
ALLOWED_HOSTS="localhost,127.0.0.1"
DATABASE_URL="sqlite:///db.sqlite3"

→ .gitignore に .env を追加し、GitHub に push しないように注意！

データベースの設定 (PostgreSQL)

1.Render で PostgreSQL を作成

2.Freeプランを選択

3.内部接続用の DATABASE_URL を取得

Render にフロントエンド (React) をデプロイ

1.New Web Service を作成

2.GitHub と連携し、リポジトリを選択

3.connectを選択

4.Build CommandとPublish Directorryを設定

Render にバックエンド (Django) をデプロイ

1.Renderにサインアップします。

2.New Web Service を作成

3.GitHub と連携し、リポジトリを選択

4.connectを選択

5.Freeプランを選択

6.Environment Variables (環境変数) を設定

解説

• DATABASE_URL = 上記で説明したPostgresのInternal Database URLを設定

• DEBUG = False

• ALLOW_HOSTS = デプロイしたフロントエンドのURLを設定

今後の改善点と学び

• 環境変数は最初に Render に設定する！

• エラー発生時は Render の「Logs」を確認

• データベース URL を間違えないように注意

• GitHub に機密情報 (.env) を push しない！