前端项目配置 Dockerfile 打包后镜像部署无法访问

Dockerfile 配置如下:

FROM node:lts-alpine

WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

EXPOSE 3001

CMD ["npm", "run", "preview"]

构建镜像

docker build -t vite-clarity-project .

启动镜像容器

docker run -p 3001:3001 --name=my-vite-clarity-project vite-clarity-project

启动后访问不到:

命令行访问:

root@btx:~# docker ps
CONTAINER ID   IMAGE                          COMMAND                  CREATED        STATUS        PORTS                                       NAMES
1c02a1d7732f   vite-clarity-project   "docker-entrypoint.s…"   4 hours ago    Up 4 hours    0.0.0.0:3001->3001/tcp, :::3001->3001/tcp   my-vite-clarity-project 
root@btx:~# curl 0.0.0.0:3001
curl: (52) Empty reply from server  // 访问不到

浏览器访问:

该网页无法正常运作localhost
未发送任何数据。
ERR_EMPTY_RESPONSE在这里插入图片描述

问题原因:

root@btx:~# docker logs 1c02a1d7732f

> vite-clarity-project@0.0.0 preview
> vite preview --port 3001

  ➜  Local:   http://localhost:3001/    // 问题原因只启动了 localhost
  ➜  Network: use --host to expose

知识点:

localhost:3001: 仅允许本地主机(即 Docker 容器内部)访问。
0.0.0.0:3001: 允许任何主机(包括容器外部的主机)通过该地址访问服务。

解决方法:

import path from "path"
import {
    defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [react()],
  resolve: {
   
    alias: {
   
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
   
    host: '0.0.0.0', // ******** 加上这一行 '0.0.0.0' ******** //
  },
})

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-18 07:44:05       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-18 07:44:05       116 阅读
  3. 在Django里面运行非项目文件

    2024-01-18 07:44:05       95 阅读
  4. Python语言-面向对象

    2024-01-18 07:44:05       103 阅读

热门阅读

  1. docker 安装mysql 并支持远程访问

    2024-01-18 07:44:05       57 阅读
  2. flask 与小程序 菜品详情和分享功能

    2024-01-18 07:44:05       57 阅读
  3. SaaS应用框架对比:Spring Boot vs Flask vs FastAPI

    2024-01-18 07:44:05       58 阅读
  4. Hive之set参数大全-9

    2024-01-18 07:44:05       46 阅读
  5. linux设置定时任务

    2024-01-18 07:44:05       57 阅读
  6. ChatGPT 股市知识问答

    2024-01-18 07:44:05       51 阅读
  7. ChatGPT提示词

    2024-01-18 07:44:05       69 阅读
  8. node.js常用命令

    2024-01-18 07:44:05       57 阅读
  9. 【第一章 引言】

    2024-01-18 07:44:05       53 阅读
  10. NLP任务中常用的损失函数

    2024-01-18 07:44:05       55 阅读