メインコンテンツまでスキップ

11. Deploy

Reactアプリケーションを公開するためには、デプロイメントのプロセスを経る必要があります。デプロイメントの基本から、GitHub Pages、Netlify、Vercelを使用したデプロイメント手順について説明します。

デプロイメントの基本​

デプロイメントとは、ローカル開発環境で作成したアプリケーションを、ユーザーがアクセスできる公開環境に配置することを指します。デプロイメントには以下の手順が含まれます：

  1. ビルド: 開発用のコードを本番環境用に最適化します。
  2. ホスティング: アプリケーションを公開するためのサーバーを設定します。
  3. ドメイン設定: カスタムドメインを設定して、ユーザーが簡単にアクセスできるようにします。

GitHub Pages​

GitHub Pagesは、GitHubリポジトリから静的サイトをホスティングするためのサービスです。無料で利用でき、簡単にデプロイできます。

手順​

  1. プロジェクトの設定: package.jsonにhomepageフィールドを追加します。

    {
      "homepage": "https://yourusername.github.io/your-repo-name"
    }

  2. gh-pagesパッケージのインストール:

    npm install --save gh-pages

  3. スクリプトの追加: package.jsonにデプロイスクリプトを追加します。

    {
      "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build"
      }
    }

  4. デプロイ:

    npm run deploy

Netlify​

Netlifyは、静的サイトのデプロイと管理を簡単に行えるホスティングサービスです。無料プランでも豊富な機能が利用できます。

手順​

  1. Netlifyアカウントの作成: Netlifyの公式サイトでアカウントを作成します。

  2. 新しいサイトの作成: ダッシュボードから「New site from Git」をクリックします。

  3. リポジトリの選択: GitHub、GitLab、またはBitbucketからリポジトリを選択します。

  4. ビルド設定:

    • ビルドコマンド: npm run build
    • パブリッシュディレクトリ: build

  5. デプロイ: 「Deploy site」をクリックしてデプロイを開始します。

Vercel​

Vercelは、Next.jsやその他の静的サイトのデプロイに特化したホスティングサービスです。自動デプロイやプレビュー環境が簡単に利用できます。

手順​

  1. Vercelアカウントの作成: Vercelの公式サイトでアカウントを作成します。

  2. 新しいプロジェクトの作成: ダッシュボードから「New Project」をクリックします。

  3. リポジトリのインポート: GitHub、GitLab、またはBitbucketからリポジトリをインポートします。

  4. ビルド設定:

    • フレームワークプリセット: Reactを選択します。
    • ビルドコマンド: npm run build
    • パブリッシュディレクトリ: build

  5. デプロイ: 「Deploy」をクリックしてデプロイを開始します。

このように進めていきます。他に追加や修正の希望があればお知らせください。