docker + nginx 部署vue项目 步骤详细

一、打包项目

在项目的根目录下执行，生成dist目录

npm run build

将dist文件夹上传到服务器中

将生成的dist文件夹上传到 服务器 /root/vue/rf-web/下

二、创建镜像

在/root/vue/rf-web/ 路径下分别创建
Dockerfile 和 nginx.conf 文件

Dockerfile

# 指定基础镜像，必须为第一个命令 如果有nginx的镜像，可以使用镜像ID或者镜像名称
# 也可以直接拉取
FROM nginx:latest
# 维护者信息
MAINTAINER kangdongwei
# 将本地文件添加到容器中
# 将dist文件中的内容复制到 /usr/local/nginx/html/ 这个目录下面，该路径是nginx容器生成的一个虚拟路径，项目存放路径
#/usr/local/nginx/dist/ 这里我新创建目录 
#我在使用/usr/local/nginx/html/ 会有显示nginx初始页面 
COPY home_dist/  /usr/local/nginx/dist/
#将写好的配置文件复制到指定文件中
COPY nginx.conf /etc/nginx/nginx.conf
# 构建镜像时执行的命令
RUN echo 'echo init ok!!'

nginx.conf

worker_processes auto;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
  
#pid        logs/nginx.pid;
 
events {
    worker_connections  1024;
}
   
http {
    include       mime.types;
    default_type  application/octet-stream;
  
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
  
    #access_log  logs/access.log  main;
  
    sendfile        on;
    #tcp_nopush     on;
  
    #keepalive_timeout  0;
    keepalive_timeout  65;
  
    #gzip  on;
  
    client_max_body_size   20m;
    server {
    	#这里监听端口与项目配置一致
        listen       8888; 
        server_name  localhost;
  
        #charset koi8-r;
  
        #access_log  logs/host.access.log  main;
     location / {
     	#这里配置和生成镜像的路径一致
        root   /usr/local/nginx/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }     
    }
  
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
  
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
  
}

构建镜像

#构建镜像命令
docker build -t rongfen:latest .
#查看镜像
docker images

三、启动镜像

#	启动镜像 设置镜像名 以及映射端口
docker run --name rongfen -p 8888:8888 rongfen:latest
#	查看启动镜像

测试访问

这里我遇到了上述的问题 在使用/usr/local/nginx/html/ 路径时访问8888端口 显示的是nginx的欢迎页 我查看容器内部/usr/local/nginx/html/路径下文件也是对的 但是就是显示不正常 我没有找到问题原因 如果有知道的大佬麻烦告诉我一下 感谢！！！