Docker用Nginx部署Vue项目

首先用指令 npm run build 打包vue项目。打包成功后会生成一个目录dist。

把该文件夹拷贝到云服务器（CentOS7）下的/data/idea/web/demo目录下(该目录随意即可)。

在该目录下新建Dockerfile文件和nginx.conf文件

touch Dockerfile

touch nginx.conf

 通过vim编辑Dockerfile文件内容:

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER wangmou
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
#拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
#输出完成
RUN echo 'echo init ok!!' 

通过vim编辑nginx.conf文件内容:

worker_processes auto;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
     location / {
        #配置Vue项目根路径,与配置首页
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        #防止刷新报404
        try_files $uri $uri/ /index.html;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
     } 
}

 cd 进入/data/idea/web/demo目录，然后用指令构建镜像。

注：

1. 不要忘记最后的 .
2. d-a-web是镜像名称(自定义)

docker build -t d-a-web .

用指令运行生成成功的镜像：

docker run -p 3000:80 -d --name d-a-web d-a-web

参数讲解：

run: 创建一个新的容器并运行一个命令
-d: 后台运行容器，并返回容器ID
-p: 端口映射，格式为：主机(宿主)端口:容器端口
--name="d-a-web": 为容器指定一个名称

 （因为我的端口本身就是80，所以就是80:80，我启动容器时候忘记-d了所以没有后台启动，最后不得不ctrl+c停掉服务，再用dicker start [CONTAINER ID] 启动）