はじめに
Webサイトを新しく公開しようということで色々と調べたところ、なるべく簡単かつ無料でやろうと思い以下を採用しました。
- Vue.js
- GitHub
- CloudFlare Pages
一度環境構築さえ出来てしまえば、GitHub
の特定ブランチを更新すればサイトが自動更新されるのでかなり使い勝手は良いと思います。その環境構築も楽なのが本当に嬉しいですね。
久々にWeb系を触ったので、メモがてらにどんな作業をしたのか書き残しておきたいと思います。
技術技術しているというよりかは、どっちかというと息抜き回ですね。
Vue.jsを用いたサイト作成
Vue CLI
を使えば簡単にプロジェクト作成できます。
$ vue create プロジェクト名
ここでは紹介しませんが、作成したプロジェクトを好きにいじってサイトを作ってみてください。
ja.vuejs.org
公開フォルダ(デフォルトはdist
)を生成・更新するには以下のコマンド。
npm run build
ローカルでのサーバー立ち上げは以下。
npm run serve
GitHubへアップロード
書く必要もないと思いますが、作成したプロジェクトをGitHub
にアップロードします。
CloudFlare Pagesの設定
CloudFlare
のサイトに行き、ログインもしくは登録を行います。
www.cloudflare.com
言語を日本語に変えられるので、英語が苦手な方も安心です。
あとはCloudFlare Pages
の画面からプロジェクトを作成、GitHubと連携してリポジトリを選択し、Vue.js
を選択してあげれば完了です。
ちなみに公開フォルダをdist
から変更している場合は設定を忘れずに。
独自ドメインを設定する
お名前ドットコムにて独自ドメインを取得し、CloudFlare Pages
に設定をしました。(独自ドメインは有料です)
www.onamae.com
またお名前ドットコムといえば大量のメールが届くとのことで悪名高い?ですが、設定すれば来ないようにすることができます。ただ管理画面の遷移が遅いのと宣伝が挟まってくるのは辛いところではあります。
CloudFlare Pages
の画面から先程のプロジェクトを選択し、カスタムドメインを選択。
DNS
移行を選択。プランはFree
でOKです。
DNS
レコードの確認&追加を行います。私の場合は変更は加えていません。
最後にネームサーバー変更とのことでお名前.comの方で作業が必要になります。
お名前ドットコムのネームサーバーの変更から、以下の画像のように2箇所に値を打ち込みます。
ここまでできたらCloudFlare
に戻り、ネームサーバーの変更は完了です。
再度CloudFlare Pages
の画面に移動し、カステムドメインを設定してあげれば独自ドメインからのアクセスが可能になっているはずです。