docker 运行自定义化的服务-前端

运行自定义化的前端服务

具体如下：

①打包前端项目，形成dist包

②编写dockerfile文件，文件内容如下：

# 基础镜像(镜像名:版本号TAG)
FROM nginx:1.0
# 镜像作者和相关元数据
LABEL maintainer="Atb" \
      version="1.0" \
      description="Custom Nginx image with custom config and web files"

# 保留或者删除此行，取决于是否需要挂载目录
# 挂载目录
VOLUME /home/soft/app/webapp
# 创建目录
RUN mkdir -p /home/soft/app/webapp
# 指定路径
WORKDIR /home/soft/app/webapp

# 复制文件{注意:文件中的前面的内容都是容器外的 后面的内容为容器内的}
# 将自定义的 Nginx 配置文件复制到容器中的正确位置
COPY nginx.conf /etc/nginx/nginx.conf

# 将自定义网页文件复制到 Nginx 的默认网页目录
COPY dist/ /usr/share/nginx/html/
 
# 指定容器内端口
EXPOSE 8182

# 启动命令
CMD ["nginx", "-g", "daemon off;"]

其中，下面这些事按需添加的

# 保留或者删除此行，取决于是否需要挂载目录
# 挂载目录
VOLUME /home/soft/app/webapp

VOLUME 指令表示一个挂载点，通常用于持久化数据或与宿主机共享数据。如果你希望容器内部的 /home/soft/app/webapp 目录被外部映射，可以使用 VOLUME。但是，如果你仅仅是创建一个工作目录并复制文件，没有必要在此处使用 VOLUME。

# 创建目录
RUN mkdir -p /home/soft/app/webapp

在镜像构建时创建目录是完全可以的，但如果没有需要额外写入的文件（例如日志文件等），则没有必要创建该目录。通常，Nginx 配置文件和网页文件会自动创建所需目录。

# 指定路径
WORKDIR /home/soft/app/webapp

WORKDIR 指令用于设置容器内的工作目录。如果你后续命令涉及在该目录中操作（例如复制文件、执行脚本等），可以使用它。此行合理，但要确保该目录对最终容器内的应用有用。

③修改nginx的配置，内容如下：

    server {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
			# 当访问的资源不存在时，返回index.html页面
			try_files $uri $uri/ /index.html;
        #}
		
		#location / {
		
        # 允许跨域访问 # 允许所有域名访问，你也可以指定具体的域名，如 'https://yourdomain.com'
        add_header 'Access-Control-Allow-Origin' '*';
		# 允许的 HTTP 方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
		# 允许的请求头
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
		# 是否允许携带凭证（如 Cookies）
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 如果是 OPTIONS 请求，直接返回 200 OK
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
			# 缓存预检请求的结果，单位秒
            add_header 'Access-Control-Max-Age' 1728000;
			# 返回204响应，表示请求成功但没有返回内容
            return 204;
			}
		}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

最后把前端包、dockerfile、nginx.conf（Nginx配置）放到一个文件夹webapp中

上传到服务器中

构建docker镜像：docker build -t 容器名:版本号 .

docker build -t my-webapp:1.0 .

运行镜像

docker run --restart=always -d -p 8182:8182 my-webapp:1.0

然后就可以正常访问了