Nuxt.jsで実装したWebサイトをNetlifyにデプロイする手順

Nuxt.jsで実装したWebサイトをNetlifyにデプロイする手順

Nuxt.jsを利用して作成した静的なコンテンツをNetlify( ネットリファイ )にデプロイする手順。githubのアカウントと Netlifyのアカウントを取得していることが前提です。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1

※ubuntu19.10にnodeのインストールはこちら

プロジェクト作成

Nuxt.jsを利用してプロジェクトを作成します。

今回はtest-proという名前でプロジェクトを作成してます。

静的ファイル出力

下記のコマンドを実行して静的ファイルを生成します

プロジェクト配下にdistディレクトリが作成されます

Gitリポジトリ追加

github上にリポジトリを追加します。今回は、nuxtprojectいう名前でリポジトリを作成しました。

リポジトリはgithub上の右上の「+」から作成できます。

※リポジトリの作成やGitHub上でwebサイトを公開する手順はこちら

git clone

作成したリポジトリをプロジェクト配下cloneします

nuxtprojectという名前のディレクトリが作成されます

git push

gitにnuxt.jsで生成した静的ファイルをpushします

distディレクトリ内の全てのファイルをnuxtprojectにコピーします

あとは静的ファイルをpushするだけです

GitHubを確認するとpushされてます

netlifyにデプロイ

githubにpushできたので、後はnetlifyにデプロイするだけです。

画面左上にある「Sites」をクリックし、「New site from Git」をクリックします。

今回はGitHubなので「GitHub」をクリックします。

「Authorize Netlify by Netlify」をクリックします

「Only select repositories」を選択し、「Select repositories」から、今回作成したリポジトリ「 nuxtproject 」を選択します。

選択後にインストールをクリックします。

パスワード入力を求められるのでパスワードを入力します

「アカウント名/nuxtproject」をクリックする

「Deploy site」ボタンをクリックする

デプロイされるとURLが表示されるのでアクセスしてみる

Nuxt.jsで生成したプロジェクトが表示される