NEW ARTICLE
Rocky Linuxでのネットワーク帯域幅の制限設定方法
  1. HOME
  2. nuxt.js
  3. Nuxt.jsで実装したWebサイトをNetlifyにデプロイする手順

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という名前でプロジェクトを作成してます。

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

## 移動
cd test-pro

## ビルド
yarn build

静的ファイル出力

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

npm run generate

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

Gitリポジトリ追加

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

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

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

git clone

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

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

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

git push

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

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

cp -r dist/* nuxtproject

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

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