Firebase + Next.js でデプロイ

tkt 2021/06/07に更新

まず nextjs 構築していく

tkt 2021/06/07

Firebase じゃなくても良いけど、 GoogleDomains 使ってるから合わせやすいかなと

tkt 2021/06/07

Route53 じゃなく GoogleDomains を使ったのは、Route53 にはない Domain がおいてあったから

tkt 2021/06/07

このテンプレで作る

tkt 2021/06/07

firebase deploy で上がった

tkt 2021/06/07

public とか styles は src/** に配置にし直すと読むようになった

tkt 2021/06/07

ts 入れる

tkt 2021/06/07

css の import が読み込めなかったけど、
これで読めるようになった

/// <reference types="next" />
/// <reference types="next/types/global" />
declare module '*.css';
declare module '*.scss';

ref: https://blog.shimar.me/2020/12/05/nextjs-css-cannot-find-module

tkt 2021/06/07

ts 入れてから deploy しようとしたら上がらなくなってた

Specified "public" directory "public" does not exist, can't deploy hosting to site

らしい

tkt 2021/06/07

テンプレート生成からやり直してみる
デプロイ成功時に commit を忘れないように

tkt 2021/06/07に更新

# yarn deploy
yarn run v1.22.5
$ firebase deploy --only functions,hosting

=== Deploying to 'ateaparty'...

i  deploying functions, hosting
Running command: npm --prefix "$PROJECT_DIR" install

up to date, audited 952 packages in 3s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Running command: npm --prefix "$PROJECT_DIR" run build

> with-firebase-hosting@5.0.0 build
> next build src/

info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                             Size     First Load JS
┌ ○ /                            1.76 kB        65.2 kB
├ ○ /404                         3.07 kB        66.5 kB
└ ○ /about                       1.76 kB        65.2 kB
+ First Load JS shared by all    63.4 kB
  ├ chunks/framework.632d61.js   42.1 kB
  ├ chunks/main.3c7694.js        19.4 kB
  ├ chunks/pages/_app.c1d3a7.js  1.02 kB
  └ chunks/webpack.2a5a41.js     952 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing . directory for uploading...
i  functions: packaged . (2.07 MB) for uploading
✔  functions: . folder uploaded successfully
i  hosting[ateaparty]: beginning deploy...
i  hosting[ateaparty]: found 0 files in public
✔  hosting[ateaparty]: file upload complete
i  functions: updating Node.js 10 function nextjsFunc(us-central1)...
✔  functions[nextjsFunc(us-central1)]: Successful update operation. 
Function URL (nextjsFunc(us-central1)): https://us-central1-ateaparty.cloudfunctions.net/nextjsFunc
i  hosting[ateaparty]: finalizing version...
✔  hosting[ateaparty]: version finalized
i  hosting[ateaparty]: releasing new version...
✔  hosting[ateaparty]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/ateaparty/overview
Hosting URL: https://ateaparty.web.app
Done in 158.56s.

public はもともと 0 だったらしい

tkt 2021/06/07

node10 が気になる

tkt 2021/06/07

14に上げる(の前に commit)

tkt 2021/06/07

# yarn deploy
yarn run v1.22.5
$ firebase deploy --only functions,hosting

=== Deploying to 'ateaparty'...

i  deploying functions, hosting
Running command: npm --prefix "$PROJECT_DIR" install

removed 5 packages, and audited 947 packages in 2s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Running command: npm --prefix "$PROJECT_DIR" run build

> with-firebase-hosting@5.0.0 build
> next build src/

info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                             Size     First Load JS
┌ ○ /                            1.76 kB        65.2 kB
├ ○ /404                         3.07 kB        66.5 kB
└ ○ /about                       1.76 kB        65.2 kB
+ First Load JS shared by all    63.4 kB
  ├ chunks/framework.632d61.js   42.1 kB
  ├ chunks/main.3c7694.js        19.4 kB
  ├ chunks/pages/_app.c1d3a7.js  1.02 kB
  └ chunks/webpack.2a5a41.js     952 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing . directory for uploading...
i  functions: packaged . (2.11 MB) for uploading
✔  functions: . folder uploaded successfully
i  hosting[ateaparty]: beginning deploy...
i  hosting[ateaparty]: found 0 files in public
✔  hosting[ateaparty]: file upload complete
i  functions: updating Node.js 14 function nextjsFunc(us-central1)...
✔  functions[nextjsFunc(us-central1)]: Successful update operation. 
Function URL (nextjsFunc(us-central1)): https://us-central1-ateaparty.cloudfunctions.net/nextjsFunc
i  hosting[ateaparty]: finalizing version...
✔  hosting[ateaparty]: version finalized
i  hosting[ateaparty]: releasing new version...
✔  hosting[ateaparty]: release complete

✔  Deploy complete!

14 に上げた

tkt 2021/06/08

ts 入れていく

tkt 2021/06/08

yarn add -D typescript @types/react @types/node

tkt 2021/06/08

# yarn deploy
yarn run v1.22.5
$ firebase deploy --only functions,hosting

=== Deploying to 'ateaparty'...

i  deploying functions, hosting
Running command: npm --prefix "$PROJECT_DIR" install

removed 10 packages, changed 2 packages, and audited 952 packages in 4s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Running command: npm --prefix "$PROJECT_DIR" run build

> with-firebase-hosting@5.0.0 build
> next build src/

info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                             Size     First Load JS
┌ ○ /                            1.76 kB        65.2 kB
├ ○ /404                         3.07 kB        66.5 kB
└ ○ /about                       1.76 kB        65.2 kB
+ First Load JS shared by all    63.4 kB
  ├ chunks/framework.632d61.js   42.1 kB
  ├ chunks/main.3c7694.js        19.4 kB
  ├ chunks/pages/_app.c1d3a7.js  1.02 kB
  └ chunks/webpack.2a5a41.js     952 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing . directory for uploading...
i  functions: packaged . (2.15 MB) for uploading
✔  functions: . folder uploaded successfully
i  hosting[ateaparty]: beginning deploy...
i  hosting[ateaparty]: found 0 files in public
✔  hosting[ateaparty]: file upload complete
i  functions: updating Node.js 14 function nextjsFunc(us-central1)...
✔  functions[nextjsFunc(us-central1)]: Successful update operation. 
Function URL (nextjsFunc(us-central1)): https://us-central1-ateaparty.cloudfunctions.net/nextjsFunc
i  hosting[ateaparty]: finalizing version...
✔  hosting[ateaparty]: version finalized
i  hosting[ateaparty]: releasing new version...
✔  hosting[ateaparty]: release complete

✔  Deploy complete!

tkt 2021/06/08

jsx -> tsx

tkt 2021/06/08

tsconfig とかはまだ入れてない

tkt 2021/06/08

# yarn deploy
yarn run v1.22.5
$ firebase deploy --only functions,hosting

=== Deploying to 'ateaparty'...

i  deploying functions, hosting
Running command: npm --prefix "$PROJECT_DIR" install

up to date, audited 952 packages in 3s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Running command: npm --prefix "$PROJECT_DIR" run build

> with-firebase-hosting@5.0.0 build
> next build src/

info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
We detected TypeScript in your project and created a tsconfig.json file for you.

info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                             Size     First Load JS
┌ ○ /                            1.76 kB        65.2 kB
├ ○ /404                         3.07 kB        66.5 kB
└ ○ /about                       1.76 kB        65.2 kB
+ First Load JS shared by all    63.4 kB
  ├ chunks/framework.632d61.js   42.1 kB
  ├ chunks/main.3c7694.js        19.4 kB
  ├ chunks/pages/_app.c1d3a7.js  1.02 kB
  └ chunks/webpack.2a5a41.js     952 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing . directory for uploading...
i  functions: packaged . (2.17 MB) for uploading
✔  functions: . folder uploaded successfully
i  hosting[ateaparty]: beginning deploy...
i  hosting[ateaparty]: found 0 files in public
✔  hosting[ateaparty]: file upload complete
i  functions: updating Node.js 14 function nextjsFunc(us-central1)...
✔  functions[nextjsFunc(us-central1)]: Successful update operation. 
Function URL (nextjsFunc(us-central1)): https://us-central1-ateaparty.cloudfunctions.net/nextjsFunc
i  hosting[ateaparty]: finalizing version...
✔  hosting[ateaparty]: version finalized
i  hosting[ateaparty]: releasing new version...
✔  hosting[ateaparty]: release complete

✔  Deploy complete!

tsconfig なくても通るの不思議

tkt 2021/06/08

index.tsx を書き換えてみる

tkt 2021/06/08

import App from '../components/App'

export default function Home() {
  return (
    <App>
      <p>Index Page, Ueeeeeeeeeeeeeei</p>
    </App>
  )
}

tkt 2021/06/08

# yarn deploy
yarn run v1.22.5
$ firebase deploy --only functions,hosting

=== Deploying to 'ateaparty'...

i  deploying functions, hosting
Running command: npm --prefix "$PROJECT_DIR" install

up to date, audited 952 packages in 2s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Running command: npm --prefix "$PROJECT_DIR" run build

> with-firebase-hosting@5.0.0 build
> next build src/

info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                             Size     First Load JS
┌ ○ /                            1.77 kB        65.2 kB
├ ○ /404                         3.07 kB        66.5 kB
└ ○ /about                       1.76 kB        65.2 kB
+ First Load JS shared by all    63.4 kB
  ├ chunks/framework.632d61.js   42.1 kB
  ├ chunks/main.3c7694.js        19.4 kB
  ├ chunks/pages/_app.c1d3a7.js  1.02 kB
  └ chunks/webpack.2a5a41.js     952 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✔  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔  functions: required API cloudbuild.googleapis.com is enabled
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing . directory for uploading...
i  functions: packaged . (2.18 MB) for uploading
✔  functions: . folder uploaded successfully
i  hosting[ateaparty]: beginning deploy...
i  hosting[ateaparty]: found 0 files in public
✔  hosting[ateaparty]: file upload complete
i  functions: updating Node.js 14 function nextjsFunc(us-central1)...
✔  functions[nextjsFunc(us-central1)]: Successful update operation. 
Function URL (nextjsFunc(us-central1)): https://us-central1-ateaparty.cloudfunctions.net/nextjsFunc
i  hosting[ateaparty]: finalizing version...
✔  hosting[ateaparty]: version finalized
i  hosting[ateaparty]: releasing new version...
✔  hosting[ateaparty]: release complete

✔  Deploy complete!

まだ大丈夫そう

なんか自動で生成されてた

画像を表示させたい

<root>/public/* に置くとreact が認識してくれないので
<root>/src/public/* に置く
ローカルでは動く

tkt 2021/06/08

デプロイすると動かないので、public の path を変更しないといけなさそう

tkt 2021/06/08に更新

firebase.json で public の path 設定を変更

{
  "hosting": {
    "public": "src/public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsFunc"
      }
    ]
  },
  "functions": {
    "source": ".",
    "predeploy": [
      "npm --prefix \"$PROJECT_DIR\" install",
      "npm --prefix \"$PROJECT_DIR\" run build"
    ],
    "runtime": "nodejs14"
  }
}

tkt 2021/06/08

deploy してみたけどまだダメそう
どこを変更すれば良いのやら、というか、どうやって画像配信を行っているのか、

tkt 2021/06/08

path の読み込み周りは書いてなかった

tkt 2021/06/08

やっている人は多そうなのに記事が全然出てこない

tkt 2021/06/08

vercel 使ってねってことかな

tkt 2021/06/08

firebase serve では表示できたけど、 deploy したらだめ

tkt 2021/06/08

画像配信は functions がやってるからこっちに読ませないと的な？
どうやるのかはわからないけども

tkt 2021/06/08

調べてやる気持ちよりも now でやり直す気持ちが強くなってきた

このスクラップは2021/06/08にクローズされました