質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

受付中

Next.jsプロジェクトをDocker,Nginxを使用し本番環境へデプロイするとCSSが効かない

tomaa
tomaa

総合スコア83

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0回答

0グッド

0クリップ

3072閲覧

投稿2022/04/05 14:49

編集2022/04/06 02:20

前提

React + Next.jsでWebシステムを作っています。

create-next-app@latestコマンドでサンプルプロジェクトを作成し、Docker,Nginxを使用し本番環境へデプロイすると、ブラウザで表示を確認した際にCSSが効かない状態となります。

どのように設定を行えば、CSSが反映された状態での表示となるでしょうか?

該当のソースコードとデプロイの工程は以下のとおりです。

1.ローカル環境でNext.jsのサンプルプロジェクトの作成

$ npx create-next-app@latest --use-npm next-nginx-docker

2.ローカル環境でDockerfile.prodの作成

FROM node:16-alpine AS builder WORKDIR /app COPY package.json ./ COPY package-lock.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:1.19-alpine AS server COPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf COPY --from=builder /app / EXPOSE 80

3.ローカル環境でdocker-compose.prod.ymlの作成

version: "3" services: app: build: context: . dockerfile: Dockerfile.prod ports: - "80:80"

4.ローカル環境でnginx.confの作成

server { listen 80; listen [::]:80; server_name mydomain.com; root /.next/server/pages; index index.html; }

5.作成したプロジェクトファイルをデプロイ先のリモートサーバーへアップロード

6.リモートサーバーで、Next.jsプロジェクトのコンテナを起動

$ sudo docker-compose -f docker-compose.prod.yml up -d

7.コンテナ起動後、ブラウザで表示を確認

CSSが効いていない表示となる

イメージ説明

8.ブラウザで表示されているindex.htmlのview-sourceを確認

*CSSが関係している以下の箇所のリンクをクリックすると404エラーとなる

index.html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"/> <meta charSet="utf-8"/> <title>Create Next App</title> <meta name="description" content="Generated by create next app"/> <link rel="icon" href="/favicon.ico"/> <meta name="next-head-count" content="5"/> <link rel="preload" href="/_next/static/css/27d177a30947857b.css" as="style"/> <link rel="stylesheet" href="/_next/static/css/27d177a30947857b.css" data-n-g=""/> <link rel="preload" href="/_next/static/css/149b18973e5508c7.css" as="style"/> <link rel="stylesheet" href="/_next/static/css/149b18973e5508c7.css" data-n-p=""/> <noscript data-n-css=""></noscript> <script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script> <script src="/_next/static/chunks/webpack-69bfa6990bb9e155.js" defer=""></script> <script src="/_next/static/chunks/framework-00b57966872fc495.js" defer=""></script> <script src="/_next/static/chunks/main-551bef8982a15171.js" defer=""></script> <script src="/_next/static/chunks/pages/_app-f55443f2448c8e66.js" defer=""></script> <script src="/_next/static/chunks/pages/index-bf8a59545a570ee7.js" defer=""></script> <script src="/_next/static/vL3f544dl4bgUK74SRA_c/_buildManifest.js" defer=""></script> <script src="/_next/static/vL3f544dl4bgUK74SRA_c/_ssgManifest.js" defer=""></script> <script src="/_next/static/vL3f544dl4bgUK74SRA_c/_middlewareManifest.js" defer=""></script> </head> <body> <div id="__next"> <div class="Home_container__bCOhY"> <main class="Home_main__nLjiQ"><h1 class="Home_title__T09hD">Welcome to <!-- --><a href="https://nextjs.org">Next.js!</a> </h1> <p class="Home_description__41Owk">Get started by editing<!-- --> <!-- --><code class="Home_code__suPER">pages/index.js</code> </p> <div class="Home_grid__GxQ85"><a href="https://nextjs.org/docs" class="Home_card___LpL1"><h2>Documentation →</h2> <p>Find in-depth information about Next.js features and API.</p></a><a href="https://nextjs.org/learn" class="Home_card___LpL1"><h2> Learn →</h2> <p>Learn about Next.js in an interactive course with quizzes!</p></a><a href="https://github.com/vercel/next.js/tree/canary/examples" class="Home_card___LpL1"><h2>Examples →</h2> <p>Discover and deploy boilerplate example Next.js projects.</p></a><a href="https://vercel.com/new?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app" class="Home_card___LpL1"><h2>Deploy →</h2> <p>Instantly deploy your Next.js site to a public URL with Vercel.</p></a></div> </main> <footer class="Home_footer____T7K"><a href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer">Powered by<!-- --> <!-- --><span class="Home_logo__27_tb"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2772%27%20height=%2716%27/%3e"/></span><img alt="Vercel Logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Vercel Logo" srcSet="/vercel.svg 1x, /vercel.svg 2x" src="/vercel.svg" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span></a></footer> </div> </div> <script id="__NEXT_DATA__" type="application/json">{ "props": { "pageProps": {} }, "page": "/", "query": {}, "buildId": "vL3f544dl4bgUK74SRA_c", "nextExport": true, "autoExport": true, "isFallback": false, "scriptLoader": [] }</script> </body> </html>

9.コンテナ内の対応するCSSファイルのディレクトリを確認

/.next/static/css # pwd

補足情報

Node 16.0

Next.js 12.1

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。