Firebase + Next.js でデプロイ

tkt

まず nextjs 構築していく

tkt

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

tkt

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

tkt

このテンプレで作る

tkt

firebase deploy で上がった

tkt

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

tkt

ts 入れる

tkt

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

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

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

らしい

tkt

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

tkt

# 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

node10 が気になる

tkt

14に上げる(の前に commit)

tkt

# 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

ts 入れていく

tkt

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

tkt

# 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

jsx -> tsx

tkt

tsconfig とかはまだ入れてない

tkt

# 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

index.tsx を書き換えてみる

tkt

import App from '../components/App'

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

tkt

# 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!

tkt

まだ大丈夫そう

tkt

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

tkt

画像を表示させたい

tkt

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

tkt

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

tkt

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

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

tkt

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

tkt

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

tkt

vercel 使ってねってことかな

tkt

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

tkt

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

tkt

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

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