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という名前でプロジェクトを作成してます。
1 2 3 4 5 6 7 8 |
## プロジェクト作成 npx create-nuxt-app test-pro ## 移動 cd test-pro ## ビルド yarn build |
静的ファイル出力
下記のコマンドを実行して静的ファイルを生成します
1 |
npm run generate |
プロジェクト配下にdistディレクトリが作成されます

Gitリポジトリ追加
github上にリポジトリを追加します。今回は、nuxtprojectいう名前でリポジトリを作成しました。
リポジトリはgithub上の右上の「+」から作成できます。
※リポジトリの作成やGitHub上でwebサイトを公開する手順はこちら

git clone
作成したリポジトリをプロジェクト配下cloneします
1 2 |
## clone git clone https://github.com/masaomasaoa/nuxtproject.git |
nuxtprojectという名前のディレクトリが作成されます
git push
gitにnuxt.jsで生成した静的ファイルをpushします
distディレクトリ内の全てのファイルをnuxtprojectにコピーします
1 |
cp -r dist/* nuxtproject |
あとは静的ファイルをpushするだけです
1 2 3 |
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で生成したプロジェクトが表示される

-
前の記事
Nuxt.js vuex-persistedstateを使ってLocal Storageにデータを保存する 2019.12.25
-
次の記事
Node.js Expressを使ってリアルタイム通信を可能にするSocket.IOの使い方 2019.12.26
コメントを書く