独自ドメインを取得してGitHub ActionsとCloudflareを用いて個人サイトを公開するまで
はじめに
趣味で独自ドメインを取得してGitHub ActionsとCloudflareを用いて個人webサイトを公開しました。備忘録として本記事を執筆することにします。
2023年11月に書いた記事を今更公開します。
内容
webサイトを公開するまでのポイントは以下の6点です。
- GitHubにリポジトリを作成し、ローカル環境で閲覧可能なWebページを作成する
※今回はVite+Reactで開発環境を作ったので、GitHub Actionsを用いています。 - GitHub PagesもしくはGitHub Actionsを用いてWebページをデプロイ
- ドメインの取得
- Cloudflareでドメイン登録とネームサーバーを設定
- DNSレコードの設定
- カスタムドメインの設定
おまけ：メールサーバーの設定
注意点
取得するドメインによって価格や更新料は異なりますので、ご注意ください。
GitHubにリポジトリを作成し、ローカル環境で閲覧可能なWebページを作成
Gitの設定、GitHubの使い方はこちらを参照してください。
GitHub Pages もしくは GitHub Actions を用いてWebページをデプロイ
GitHub Pages を利用すると、GitHub 上に置いた静的なウェブサイトを公開することができます。無料で利用でき、1つのリポジトリにつき1つをデプロイできます。
GitHub Pagesでの公開方法はこちらです。
私は今回Reactのプロジェクトを使用したので、GitHub Actionsを用いました。
まず、リポジトリの Settingsタブから Pagesを選択し、Build and deploymentの下の Sourceで GitHub Actionsを選択します。
次にワークフローを作成します。
リポジトリに .github/workflows/フォルダを作成し、そのフォルダ内に .ymlまたは .yamlを記述してください。
今回私が使用したymlファイルはこちらです。
# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
name: Deploy static content to Pages
on:
# デフォルトブランチを対象としたプッシュ時にで実行されます
push:
branches: ['main']
# Actions タブから手動でワークフローを実行できるようにします
workflow_dispatch:
# GITHUB_TOKEN のパーミッションを設定し、GitHub Pages へのデプロイを許可します
permissions:
contents: read
pages: write
id-token: write
# 1つの同時デプロイメントを可能にする
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# デプロイするだけなので、単一のデプロイジョブ
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
# dist リポジトリのアップロード
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
今回Viteというビルドツールを用いたので、こちらのGitHub Pagesの説明を参考にしました。
また、404エラーが出たので、リポジトリ内の vite.config.jsを変更しました。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
base: process.env.GITHUB_PAGES // この行を追加
? "reactailwind" // この行を追加
: "./", // この行を追加
plugins: [react()],
})
この変更についてはこちらを参考にしました。
ReactをGitHub Pagesにデプロイしよう〜Vite編〜
変更後、正常にページが表示されるようになりました。
ドメインの取得
ここまでの設定では、デフォルトの github.ioというドメインで公開されています。
今回、私はお名前.comで cheru.jpを取得しました。無料や安めのドメインもあるので、色々調べて購入すべきだと思います。Cloudflareだと原価です。
また、購入時にWhois情報公開代行を設定しておきましょう。この設定をしないと、名前や住所などの個人情報が世界中に公開されてしまうからです。
※Cloudflareではjpドメインが取れません
Cloudflareでドメイン登録とネームサーバー設定
Cloudflareのアカウントを作成して、ログインし、Webサイトから サイトを追加するのボタンを押して、取得したドメインを入力して下さい。
プランの選択画面では、個人サイト用なので、Freeプランを選択してください。
今回は、お名前.comでドメインを取得した前提で、話を進めます。
お名前.comの管理画面にて、ネームサーバーをCloudFlareのものを参照するように設定変更していきます。
お名前.com Naviへログインし、ネームサーバーの設定をクリックします。
今回はお名前.comのサーバーではなく、Cloudflareのネームサーバーを使うので、他のネームサーバーを利用を選んでください。
Cloudflare管理画面の左メニュー 概要に記載されている手順に従って、ネームサーバーの置き換えをしてください。
DNSレコードの設定
Cloudflare管理画面の左メニュー DNSから レコードを選んでください。
初期設定のレコードは一旦消しましょう。
レコードを追加していきます。
タイプは CNAMEを選択し、名前の部分に @を入れてください。ターゲットはリポジトリのあるアカウントのアカウント名(例:hoge)に github.io をつけるので、hoge.github.ioのようになります。プロキシステータスはDNS onlyにしましょう。ここまでできたら保存します。
もう1つレコードを追加します。
タイプは CNAMEを選択し、名前の部分に wwwを入れてください。ターゲットは例えば hoge.github.ioとなるようにしましょう。プロキシステータスはDNS onlyでよいです。ここまでできたら保存します。
Cloudflare管理画面の左メニュー SSL/TLSから 概要を選んでください。
SSL/TLS 推奨機能を有効にしておきましょう。
以上で、Cloudflareの設定は終わりです。
カスタムドメインの設定
GitHubのリポジトリに戻りましょう。
GitHub Pagesの設定から Custom Domainの欄に取得したドメインを入力してください。
✔︎ DNS check successfulとなれば、しばらく待つと取得したドメインで自分のサイトを見ることができるようになります。
おまけ：メールサーバーの設定
今回はさくらのメールボックスを使用しました。
さくらのレンタルサーバのページ右上、コントロールパネルログインから新規申込をしてください。
Discussion