リソース
開発環境構築
Netlifyセットアップ

NetlifyでWebサイトを公開する設定

NetlifyはGitHubリポジトリと連携してWebサイトを自動デプロイできるサービスです。コードをプッシュするだけでサイトが更新され、ブランチごとのプレビューサイトも自動作成できます。

1. 準備

Netlifyアカウント作成

  1. netlify.comにアクセス
  2. 「Sign up」からGitHubアカウントでログイン
  3. 必要な権限を承認（基本的に、全部チェック）

2. 新規プロジェクト作成

GitHubリポジトリとの接続

Netlifyダッシュボードで「Add new site」→「Import an existing project」を選択します。

Netlifyで新規プロジェクトを作成する

リポジトリ選択

次に、「Deploy with GitHub」を選択（認証も実行）し、対象のリポジトリを選択（検索も可能）します。

NetlifyからGithubのリポジトリを選択

ビルド設定

以下を設定します。

  • プロジェクト名:
    • わかりやすい名前（英数半角数字のみ、スペース不可）
    • 名前.netlify.app のURLで公開されます
    • 他社と重複しない名前をつける必要があります

ビルド設定はプロジェクトによって違います。

プロジェクトごとの設定を行いましょう。何らかのスターターパックなどを使っている場合は、 netlify.toml というファイルがあり、その設定に従えばOKです。特に設定する必要はありません。

Enviroment variables は、システムを開発し、公開するときなどに使います。あるいは、外部に接続するNodeスクリプトなどを作った場合に利用します。これらは、使うツールの説明に従って設定します。

全て設定できたら「Deploy プロジェクト名」という青緑のボタンをクリックします。

NetlifyでDeployデプロイする

初回デプロイ確認

Netlify初回設定

  • デプロイが完了すると、自動生成されたURLでサイトが確認できます

Netlify公開完了

  • Site settingsから独自ドメインの設定も可能です

2. カスタムドメイン（独自ドメイン）設定

大まかに以下のような作業を行います。

Netlifyで独自ドメイン設定

  1. お使いのネームサーバーで、事前にカスタムドメインを設定する
    • CNAME で設定する（宛先は、 プロジェクト名.netlify.app）
    • 独自ドメインの設定などを記載
    • Cloudflareの場合、プロキシ機能は、必ずOffにすること
  2. Projectを開く
  3. ProjectのDomain management を開く
  4. Project domains で、「Add a domain」で、「Add a domain your already own」を選ぶ
  5. 独自ドメインを記入し「Verify」をクリックする（ここですんなり通るように、事前設定をしておくこと）
  6. Add subdomain ボタンを押す
  7. Domain management のページに戻るので、「Verify DNS Configuration」をクリックする（事前に、ご自身のネームサーバーで設定済みで、更新が有効になっている時にクリックしてください。Cloudflareなら数秒待てば大丈夫） DNS設定
  8. 完了

3. ブランチ別サイト作成（プレビュー機能）

サイト更新に便利な「ブランチ別サイト作成」を設定します。

feature/XXXXブランチの自動プレビュー設定

  1. Site settings > Build & deploy > Branch deploysにアクセス
  2. 「Branch deploy contexts」で以下を設定：
    • Deploy previews: Automatically build deploy previews for all pull requests
    • Branch deploys: Deploy only the production branch
  3. 「Deploy contexts」で追加設定：
    • Branch deploy contexts → 「Edit settings」
    • Branch name pattern: feature/*を追加

プレビューサイトの確認

  • feature/XXXXブランチにプッシュすると自動でプレビューサイトが作成
  • URLは https://feature-xxxx--[site-name].netlify.app 形式
  • Deploysタブで各ブランチのデプロイ状況を確認

4. 日常的な運用

更新フロー

  1. feature/new-contentブランチを作成
  2. コンテンツを更新してプッシュ
  3. プレビューサイトで確認
  4. 問題なければメインブランチにマージ
  5. 本番サイトに自動反映

トラブル時の確認ポイント

  • ビルドエラー: Deploysタブでログを確認
  • 表示されない: Publish directoryの設定を確認
  • プレビューが作成されない: Branch deploy設定を確認

よくある設定

  • 環境変数: Site settings > Environment variablesで設定
  • 独自ドメイン: Site settings > Domain managementで設定
  • HTTPS: 自動で有効化（Let’s Encrypt）
Visual Studio Codeブランチの使い方