Nuxt(SSR)を最短でfirebaseにデプロイする

2021年11月9日 02:04

タイトル以外のことはやらず、「何やってるかは置いといて、とりあえずNuxt(SSR)の初期ページがfirebaseにデプロイされてアクセスできる！」を目指します。

対象者
・自称プログラミング初級者（「マジの初心者は抜けたかな〜」くらい？）
・Firebaseとりあえずちょっと触ってみたい人
・Nuxt(SSR)の小規模アプリケーションの簡単なデプロイ方法探してる人
・とりあえずなんかデプロイしてみたい人

Firebaseとは
ざっくりいうとGoogleが提供している開発者向けなんでもアリなプラットフォームです。今回はその無数にある機能の一つであるFirebase Hostingを使って、Webアプリケーションを外部アクセスできる状態にします。

0 前提

こちらの参考文献を参照にしつつ、一部うまくいかなかったのでそれを調整したものになります。
参考：【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版

環境
node 14

1 やります

やることはシンプルで、
- Firebase側の設定
- GitからTemplateを持ってくる
- firebase-cliを入れる
- firebase initを実行する
- firebase.jsonを書き換える
- firebase deployを実行する
以上です。

Firebase側の設定
（Googleアカウントを作ります。）
「Firebase」を検索して

一番上に出てくるやつをひらきます。

右上にある「コンソールへ移動」的なやつを押下

「プロジェクトを作成」的なやつを押下して言われる通りに進めます。
作ったプロジェクトを開くと、サイドバーに色々あるので、プランを変更します。

「Blaze（従量課金）プラン」にします。（nodeの10以上を使うにはこのプランにしておくことが必要です。とりあえず習作としてデプロイの練習するくらいならお金がかかることはありません。）

GitからTemplateを持ってくる

以下のテンプレートをコピーします。

「Use Template」みたいなところから進むと、こちらのリポジトリをコピーした自分のリポジトリを作成するフローに入ります。

firebase-cliを入れる

npm install -g firebase-tools //firebase CLIをインストール

firebase CLIをインストールします。
-gはグローバルオプションです。グローバルでいれてないと動きません。

firebase initを実行する

firebase init //設定ファイルを作成

firebase init を実行します。
実行階層はプロジェクトフォルダ内（firebase.jsonとかと同じ階層）です。
各質問は以下のように回答します。

・Which Firebase features do you want to set up for this directory?
　→Functions, Hosting
・Please select an option
　→Use an existing project
・Select a default Firebase project for this directory
　→（先ほど作成したプロジェクト名）
・What language would you like to use to write Cloud Functions?
　→JavaScript
・Do you want to use ESLint to catch probable bugs and enforce style?
　→Yes（お好みで）
・各種〜〜〜overwrite ?
　→No
・Do you want to install dependencies with npm now?
　→Yes
・What do you want to use as your public directory?
　→public
・Configure as a single-page app (rewrite all urls to /index.html)?
　→No（今回はSSRなので）
・Set up automatic builds and deploys with GitHub?
　→No（お好みで）

ここまでで
✔ Firebase initialization complete!
って言われたら完了！

firebase.jsonを書き換える
firebase.jsonがinitの過程で上書きされてしまうので、

↑をコピペしてfirebase.jsonを修正
（元の参考URLのものだと、predeployの過程でnpm installしておらず、nuxtの必要なモジュールが入ってない挙動をする。）

firebase deployを実行する

firebase deploy

を実行。
✔ Deploy complete!
と表示されれば成功で、その後Hosting URLとして表示されるURLにアクセスすると

Nuxtの初期画面が表示されます。
お疲れ様でした。

3 感想

多少設定云々が必要になるとはいえ、ものの１時間程度でWeb appをデプロイできたので興奮しました。
これをベースにうまく太らせていけば、「フロント側をとりあえず設置する」ことが可能なので、バックエンドに偏っているかつデプロイに毎回苦戦している自分みたいな人間としてはとても楽な雛形を作れた気がします。
ぜひご活用、コメント、（答えれるかわかりませんが）質問、ツッコミなどお願いします。

4 最後に

最後になりますが、私の所属元Playrieについての紹介です。
Playrieは私が在学中に立ち上げた会社で、メイン事業とは別に「Neowise」と称する学生エンジニアコミュニティの運営を行なっております。
こちらのコミュニティでは、学生エンジニアおよび初学者に対して、
「メンタリングや情報共有」「案件の斡旋」「学生エンジニア同士あるいは外部エンジニアとの交流の場」を提供していて、現在20名程度がメンバーとして参加してくれています。基本的に活動はオンラインです（まれに外部のハッカソンにチームを組んで参加するなどの際にオフラインで活動しています）。

弊社では、こちらのNeowiseコミュニティにて
・メンバーとしての参加希望者（基本的にエンジニア/デザイナー志望の学生（レベル的にも初学者〜ちょっとできる学生くらいを想定している）ですが、学ぶ意欲がある方で活動に積極的であれば特に縛りはありません！）
・コラボレーションしてくださる個人/法人
・運営に関わっていただける個人（Playrie本体へのインターン希望含む。）
・学生に案件をいただける個人/法人（弊社から学生エンジニアを派遣するような形になります。）
を絶賛大募集しています！

もしご興味を持っていただければ、HPのお問い合わせフォームや岩川のTwitterなどでご連絡いただけると幸いです！

今後もこういったちょっとした開発TipsやPlayrieメイン事業に関する発信を行なっていきますので、応援、フォロー、拡散などよろしくお願いいたします！

会社Twitter：＠PlayrieInc

メンバーTwitter
岩川：＠Ryuno_Iwakawa （代表/記事本人/エンジニア見習い）
井尻：@omao_no_heya （広報/ブランディング他）
樋田：＠swarm_blue （デザイン/Neowise世話役）　　　　　　
山城：@ymtk__0822 （開発責任者/Neowiseメンター）