#はじめに
こんにちは。
こちらの記事では、FirebaseHostingで静的サイトのデプロイを行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。
#前提
以下の条件を行なっていない方はこちらの記事を参考に進めてみてください。
- Nuxt.jsのプロジェクト作成済み
- FirebaseCLIのインストール済み
- Firebaseのログイン、初期化済み
#実装手順
###1. 静的サイトの生成
まずはnuxt.congig.jsに下記のように追記して、generate コマンドを実行してファイルを生成します。
nuxt.congig.js
target: 'static'
npm run generate
これで、nuxtプロジェクト直下のdistディレクトリに、静的にエクスポートされる。
###2. firebase.jsonの確認
デプロイする際に、Nuxtはdistディレクトリにサイトが生成されるので、firebase.jsonのpublicがdistになっているか確認する。
firebase.js
{
"hosting": {
"public": "dist"
}
}
###3. デプロイコマンドの実行
下記のコマンドをターミナルで実行して、Deploy complete!と表示が出ればデプロイの完了です。
【Firebaseコンソール＞Hosting】からURLを確認してみましょう！
firebase deploy --only hosting
#参考記事
#おわりに
ここまで静的サイトのデプロイを行う方法についてまとめました。
コマンドを実行する前に、手順を踏んでいかないとうまく画面が反映されなくなるので、こちらの記事やNuxt公式を見ながら進めていただければと思います！
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！