

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

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

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

* * *

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

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

[code]

    $ npx create-next-app@latest --use-npm next-nginx-docker
    
[/code]

２．ローカル環境で`Dockerfile.prod`の作成

[code]

    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
    
[/code]

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

[code]

    version: "3"
    
    services:
      app:
        build:
          context: .
          dockerfile: Dockerfile.prod
        ports:
          - "80:80"
    
[/code]

４．ローカル環境で`nginx.conf`の作成

[code]

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

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

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

[code]

    $ sudo docker-compose -f docker-compose.prod.yml up -d
    
[/code]

７．コンテナ起動後、ブラウザで表示を確認  
↓  
`CSS`が効いていない表示となる

[![画像の説明をここに入力](https://i.stack.imgur.com/wulDS.png)](https://i.stack.imgur.com/wulDS.png)

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

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

[code]

    <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=""/>
    
[/code]

index.html

[code]

    <!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>
    
[/code]

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

[code]

    /.next/static/css # pwd
    
[/code]

* * *

Node 16.0

Next.js 12.1


CC BY-SA 4.0
2022-04-06T00:33:41.030
88189
2022-04-06T01:54:48.800
2022-04-06T01:54:48.800
36988
36988
question
docker reactjs nginx next.js
Next.jsプロジェクトを本番環境へデプロイするとCSSが効かない