docker-compose 部署 vue 项目

编写Dockerfie文件

vi Dockerfile

文件内容如下：

# ======================== 上：npm打包  下：nginx运行 ========================
# nginx镜像
FROM nginx
# 维护者信息
MAINTAINER gaoyt "1619149796@qq.com"

# 移除nginx容器的default.conf文件、nginx配置文件
# RUN rm /etc/nginx/conf.d/default.conf
# RUN rm /etc/nginx/nginx.conf

# ENV PROXY_HOST ${PROXY_HOST}
# ENV PROXY_IP ${PROXY_IP}

# 把主机的nginx.conf文件复制到nginx容器的/etc/nginx文件夹下
COPY ./nginx.conf /etc/nginx/
# 拷贝前端vue项目打包后生成的文件到nginx下运行
COPY ./dist /usr/share/nginx/html

# 暴露9527端口
EXPOSE 9527

# 注：CMD不同于RUN，CMD用于指定在容器启动时所要执行的命令，而RUN用于指定镜像构建时所要执行的命令。
#    RUN指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定--no-cache参数，如：docker build --no-cache

# 使用daemon off的方式将nginx运行在前台保证镜像不至于退出
CMD ["nginx", "-g", "daemon off;"]

编写nginx.conf配置文件

vi nginx.conf

文件内容如下：

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  65;

    # include /etc/nginx/conf.d/*.conf;

  	server {
        listen       9527;
        charset utf-8;
        server_name  120.77.154.230;# 服务器地址或绑定域名

    	# start ---------------------------------------------------------------------------------------------

        location / {
           root   /usr/share/nginx/html;
           try_files $uri $uri/ /index.html;
        }
		location /api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://120.77.154.230:7779/;
        }

        # end ---------------------------------------------------------------------------------------------

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
   }
}

其中，
服务器地址 server_name和 代理地址 proxy_pass 根据实际情况变更

vue项目打包

npm run build

编写docker-compose.yml文件

vi docker-compose.yml

文件内容如下：

version: '3'
services:
	vue-program:
	    image: imageName
	    container_name: cbb-ui
	    build:
	      context: ./xxx
	      dockerfile: ./dockerfile 
	      args:
	        proxy_host_value: 7779
	    environment:
	      TZ: Asia/Shanghai
	    # 依赖于api容器，被依赖容器启动后此web容器才可启动
	    depends_on:                          
	      - webimage
	    extra_hosts:
	      - "120.77.154.230:120.77.154.230"
	    ports:
	       - "9527:9527"

其中，
xxx是dockerfile文件目录

运行

docker-compose up -d --build