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で生成したプロジェクトが表示される
-
前の記事
Nuxt.js vuex-persistedstateを使ってLocal Storageにデータを保存する 2019.12.25
-
次の記事
Node.js Expressを使ってリアルタイム通信を可能にするSocket.IOの使い方 2019.12.26
コメントを書く