与 docker 容器上的 nginx 发生反应 - 不加载 App.tsx

问题描述 投票：0回答：1

我有一个反应应用程序 当我在本地运行它时，它可以正常工作

npm run dev

我想让我的 React 应用程序在本地和带有 docker 镜像的 aws 上运行 我创建了这个 docker 镜像：

  # Step 1: Use an official Node runtime as a parent image
FROM node:20.10.0 as build

# Step 2: Set the working directory in the container
RUN mkdir /app
WORKDIR /app

# Step 3: Copy the package.json files and install dependencies
COPY package-lock.json ./
COPY package.json ./
RUN npm install --verbose
RUN npm set audit false


# Step 4: Copy the rest of your app's source code
COPY . /app

# Step 5: Build your app
RUN npm run build

# Stage 2: Serve the application with Nginx
FROM nginx:alpine

# Step 6: Copy build artifacts from the 'build' stage to the Nginx directory
COPY --from=build /app/build /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf

# Step 7: Expose port 80 for Nginx
EXPOSE 80

# Step 8: Start Nginx
CMD ["nginx", "-g", "daemon off;"]

nginx x 的配置文件 nginx.conf

events {
    # Event-driven configuration
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # Include server configurations
    include /etc/nginx/conf.d/*.conf;

    # Further http configurations
}

默认.conf

server {
    # Listen on port 80 for incoming connections
    listen 80;

    # Define the root directory where your files are located
    # This should be the path to your built React application
    root /usr/share/nginx/html;

    # Specify the file to serve as index
    index index.html;

    # Handle Single Page Application (SPA) routing:
    # Attempt to serve any requested file or route, fall back to index.html if not found
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Custom error pages (optional)
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

docker 镜像正在运行，没有错误：

2024/01/06 13:06:51 [notice] 1#1: start worker process 32
2024/01/06 13:06:51 [notice] 1#1: start worker process 33
2024/01/06 13:06:51 [notice] 1#1: start worker process 34
2024/01/06 13:06:51 [notice] 1#1: start worker process 35
2024/01/06 13:06:51 [notice] 1#1: start worker process 36
2024/01/06 13:06:51 [notice] 1#1: start worker process 37
172.17.0.1 - - [06/Jan/2024:13:07:15 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows 
NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" "-"
    172.17.0.1 - - [06/Jan/2024:13:07:19 +0000] "\x16\x03\x01\x02,\x01\x00\x02(\x03\x03\xF3P\xD9\xB0C\xB6\x9D1\x9D\x14\xE3\xBFz\x95\x1B\x22_\xFD8I\xA7\xE2\x16#DNy\x03\x5C\xED\x9F\x19 \xB61\xB2\x89C\xAA\xCA=\x8E\xA2\x18\x8B\x9Cs\x12f\x9C\xBD\xF9\x80J\xD2@eV;\xCA$i\xE8L\xDE\x00 \xFA\xFA\x13\x01\x13\x02\x13\x03\xC0+\xC0/\xC0,\xC00\xCC\xA9\xCC\xA8\xC0\x13\xC0\x14\x00\x9C\x00\x9D\x00/\x005\x01\x00\x01\xBF\xCA\xCA\x00\x00\x00\x0B\x00\x02\x01\x00\x00" 400 157 "-" "-" "-"
    172.17.0.1 - - [06/Jan/2024:13:07:19 +0000] "\x16\x03\x01\x02\x00\x01\x00\x01\xFC\x03\x03-:\xE1\x8B/\xAA\xA0k^\xBC \xCF\xBA\x19\xF0\xFC\x18\xE5)r]\x9CZ42\xB3\xB7\xA3\xFB\x95`\x82 yL\xE0\x1DW[\x9ENwp\x97L\xC5\xE8[p6\xA6\xA7N^\xAB\xBE\xE8L\xD3\x0E\x83\x87 \xAD-\x00 jj\x13\x01\x13\x02\x13\x03\xC0+\xC0/\xC0,\xC00\xCC\xA9\xCC\xA8\xC0\x13\xC0\x14\x00\x9C\x00\x9D\x00/\x005\x01\x00\x01\x93\xFA\xFA\x00\x00\x00" 400 157 "-" "-" "-"
    172.17.0.1 - - [06/Jan/2024:13:07:19 +0000]

当我去本地主机时

我看到位于 public/html 的 index.html 文件

但问题是它没有加载原始的 tsx 文件

我的index.html（在公共目录上）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="monetag" content="5a02f84c329734f784dc0af09b7ae775">
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="../favicon192.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS 2</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

我的 nginx.conf （在主目录中）

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

在这个 sdirectory 上我有很多文件，所以我假设它复制了它们：

/usr/share/nginx/html/ls -ltr
drwxr-xr-x    2 root     root          4096 Jan  6 09:54 source-map-url
drwxr-xr-x   19 root     root          4096 Jan  6 10:07 @webassemblyjs
drwxr-xr-x   24 root     root          4096 Jan  6 10:07 @types
drwxr-xr-x    4 root     root          4096 Jan  6 10:07 enhanced-resolve
drwxr-xr-x    3 root     root          4096 Jan  6 10:07 loader-runner
drwxr-xr-x    2 root     root          4096 Jan  6 10:07 infer-owner
drwxr-xr-x    4 root     root          4096 Jan  6 10:07 webpack-sources
drwxr-xr-x   10 root     root          4096 Jan  6 10:07 webpack
drwxr-xr-x    4 root     root          4096 Jan  6 10:07 watchpack
drwxr-xr-x    3 root     root          4096 Jan  6 10:07 tapable
drwxr-xr-x    3 root     root          4096 Jan  6 10:07 serialize-javascript
drwxr-xr-x    3 root     root          4096 Jan  6 10:07 schema-utils
-rwxr-xr-x    1 root     root          1738 Jan  6 10:12 package.json
-rwxr-xr-x    1 root     root        903386 Jan  6 10:12 package-lock.json
-rwxr-xr-x    1 root     root           201 Jan  6 10:37 vite.config.ts
-rwxr-xr-x    1 root     root           758 Jan  6 11:36 Dockerfile
-rwxr-xr-x    1 root     root           398 Jan  6 11:50 index.html
-rwxr-xr-x    1 root     root             4 Jan  6 11:52 COMMIT_EDITMSG
-rwxr-xr-x    1 root     root          8181 Jan  6 11:52 index
-rwxr-xr-x    1 root     root            41 Jan  6 11:52 ORIG_HEAD
drwxr-xr-x    3 root     root          4096 Jan  6 11:55 logs
-rwxr-xr-x    1 root     root           103 Jan  6 13:01 FETCH_HEAD
-rwxr-xr-x    1 root     root           168 Jan  6 13:03 nginx.conf
/usr/share/nginx/html
reactjs docker nginx
1个回答
0
投票

Index.html 缺少不是由 Vite 生成的部分

  <script type="module" src="/src/main.tsx"></script>

并且还要删除这部分

rollupOptions: {
  input: 'src/main.tsx' // This line should be removed or commented out
 }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.