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

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

1. 環境
2. プロジェクト作成
3. 静的ファイル出力
4. Gitリポジトリ追加
5. git clone
6. git push
7. netlifyにデプロイ

環境

OS ubuntu19.10
node v12.13.0
npm 6.12.1

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

プロジェクト作成

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

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

## プロジェクト作成
npx create-nuxt-app test-pro

## 移動
cd test-pro

## ビルド
yarn build

## プロジェクト作成

npx create-nuxt-app test-pro

## 移動

cd test-pro

## ビルド

yarn build

静的ファイル出力

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

npm run generate

1	npm run generate

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

Gitリポジトリ追加

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

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

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

git clone

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

## clone
git clone https://github.com/masaomasaoa/nuxtproject.git

1 2	## clone git clone https://github.com/masaomasaoa/nuxtproject.git

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

git push

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

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

cp -r dist/* nuxtproject

1	cp -r dist/* nuxtproject

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

git add .
git commit -m "first commit"
git push origin master

git add .

git commit -m "first commit"

git push origin master

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で生成したプロジェクトが表示される