Nuxt.jsサイト公開~GitHubにpushしてNetlifyにデプロイするまで

  • 公開日アイコン
Nuxt.jsサイト公開~GitHubにpushしてNetlifyにデプロイするまで メイン画像

Ad Area

とりあえず作成したNuxt.jsをGitHubへpushし、Netlifyで公開した(Nuxt.jsのコンテンツを作り込むのは難しいが、公開するだけなら比較的簡単にできる)。

Netlifyとは

Netlify: All-in-one platform for automating modern web projects

レンタルサーバーがWordPressなどのような動的コンテンツのホスティングサーバーなら、静的コンテンツのホスティングサービスがNetlifyに当たる。レンタルサーバーでも静的コンテンツを運営することはできるが、Neltifyの場合月100GB転送量が無料という魅力がある。よほどアクセス数が多いサイトでなければ無料枠で運営できるだろう。

  1. リポジトリと連結
  2. サイト構築の設定をする
  3. Webサイトを展開

という3ステップでサイトを公開できる。

Nuxt.jsとGitHubリポジトリの連携

GitHubにリモートリポジトリを作成する。

GitHubトップページ左サイドバー「repositories」の項にあるNewボタンをクリックすると新規作成ページに遷移するので、必要項目を入力する。

リポジトリ名は後で変更することは可能だが、同時にGitの設定も変更しなくてはならない手間を考えると、あまりいい加減な名前は付けられない。リポジトリの公開状態はPublic(公開)・Private(非公開、自分のみ閲覧)が選択できる。全世界に公開したくないのであればPrivateを選択しておくのが賢明だろう。

ローカルに作成したNuxt.jsのプロジェクトをローカルリポジトリとしてGit管理下に置く。

プロジェクト内で実行

$ git add -A

コミットの際は、-mの後ろにコメントが付けられるので分かりやすい内容を記述する。

$ git commit -m "first commit"

GitHub上にある登録済みのリモートリポジトリを設定する。

$ git remote add origin git@github.com:username/foldename.git

リモートリポジトリにpushする。

$ git push -u origin master

GitHubとNetlifyの連携

Netlifyへの登録は、GitHub・GitLab・Bitbucketアカウント、emailの4つの方法でできる。GitHubアカウントを持っているのでをGitHub選択する。

認証画面が出てくるので、クリックしてそのまま進む。

Netlifyにサイトを追加する。「New site from Git」をクリック。

Netlify 1

GitHubを選択

Netlify 2

「Authorize Netlify by Netlify」をクリック。

Netlify 3

公開したいサイトのリポジトリを選択する。

Netlify 4
Netlify 5

デプロイするための設定を行う。

Netlify 6

「Build command」→nuxt generateと入力 「Publish directory」→distと入力

「Deploy site」をクリックするとデプロイが開始する。

Netlify 7
デプロイ中 (Enqueued)
Netlify 8
デプロイが完了するとPublishedに変わる

friendly-goldwasser~という名の、何やら良く分からないサブドメインのサイトが完成した。このままだと何なので変更する。

歯車マーク「Site settings」から設定ページ「Site details」に遷移、

Netlify 9

Site informationの項の「Change site name」をクリックするとモーダルウィンドウが起ち上がるので、テキスト欄に好みの文字列を入力し「Save」で保存する。

Netlify 10

参考ページ

Ad Area