Netlifyを使用してサブドメインでGitリポジトリをホストする方法

のようなポートフォリオwww.glynlewington.comがNetlifyでホストされていて、プロジェクトを同じドメインに追加したいとします。それらはすべて別個のgitリポジトリであり、Netlifyは単一のリポジトリからホストするために作られています…しかし恐れないでください!project.glynlewington.comほんの少しの作業で、サブドメインでそれらをホストできます。

Netlifyを使用すると、静的サイトを無料で簡単にホストできます。最近、ポートフォリオをVPSからそれらに移動しました。gitリポジトリにプッシュするたびにサイトが自動的に更新されるのは素晴らしいことです。

以前は、すべての個人プロジェクトをサブディレクトリでホストしていましたwww.glynlewington.com/project。これは、Netlifyでは難しいか不可能です。Netlifyは主に、1つのgitリポジトリから1つのサイトですべてをホストするように設定されています。

私が遭遇した妥協案は、代わりにのようにサブドメインでそれらをホストすることproject.glynlewington.comです。これも十分に文書化されていませんが、可能です。

  • www.netlify.comにアクセスして、ログインまたはサインアップします。
  • 「gitからの新しいサイト」を選択します。
  • プロバイダー(GitHubなど)を選択します—ここで認証が必要になる場合があります。
  • サイトを作成するgitリポジトリを選択します。
  • デプロイ元のブランチを選択します。
  • 実行する必要のあるコマンドを選択します。— Reactアプリの場合は、ビルドコマンドを実行する必要があります。
  • 公開するディレクトリを選択します。index.htmlなどのファイルが含まれます。— Reactアプリの場合、これはおそらくビルドフォルダーになります。
  • 「ビルドサイト」を選択します。

この時点で、などのNetlify無料ドメインでホストされている機能するアプリが必要です//hungry-bose-fb0e6d.netlfiy.com。これが機能しない場合は、ビルドプロセスにエラーがないことを確認し、エラーがある場合は修正します。

次に、カスタムドメインを設定します。

  • Netlifyでアプリの概要に移動します。
  • サイトが正常にデプロイされ、カスタムドメインを設定できることが表示されます。
  • [カスタムドメインの設定]をクリックし、サブドメインを含む目的のドメインを入力して、[確認]をクリックします。例えばproject.glynlewington.com

次に、ドメインホスティングプロバイダーにログインします。私はCloudflareを使用していますが、他のものを使用しても同じか類似しています。

  • DNS設定に移動します。
  • 新しいCNAMEレコードを選択します。
  • 「名前」を入力します—これはサブドメインです。Netlifyで以前に選択したものと同じである必要があります。例えばproject
  • 「IPv4アドレス」の下に、Netlifyサイトの無料ドメインを入力します。例えばhungry-bose-fb0e6d.netlify.com
  • Cloudflareも使用している場合は、Cloudflareを介したトラフィックルーティングをオフにします。これはNetlifyを台無しにします。
  • レコードを追加します。

完了!これを行うと、サブドメインのサイトにアクセスできます。

Netlifyはまた、httpsセキュリティをサイトに自動的に追加します。これについて心配する必要はありません。