Docker前端部署

前端我们需要nginx来部署，所以我们拉取nginx然后再打包我们的项目，最后使用Dockerfile脚本生成我们前端镜像。

第一步拉取Nginx

第二步更改我们项目中nginx.conf文件

server {
      listen 80;
      server_name  www.wolfboy.xyz;
      location / {
              root   /usr/share/nginx/pethome_front;
              index  index.html;
      }
    }
    server {
      listen 80;
      server_name  admin.wolfboy.xyz;
      location / {   
              root   /usr/share/nginx/pethome_admin;
              index  index.html;
      }
    }
    server {
      listen 80;
      server_name  api.wolfboy.xyz;
	  location / {
		add_header 'Access-Control-Allow-Origin' $http_origin;
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' '*';
		add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,token,U-TOKEN,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
		add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
		if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $http_origin;
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' '*';
			add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,token,U-TOKEN,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			add_header 'Access-Control-Max-Age' 1728000;
			add_header 'Content-Type' 'text/plain; charset=utf-8';
			add_header 'Content-Length' 0;
			return 204;
		}
		root   html;
		index  index.html index.htm;
		proxy_pass http://pethome_service:8080;  #这里跟后端服务的link名字
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_connect_timeout 5;
	  }
	}

这里我们需要对域名，端口进行更改，因为我们到时候是通过内部访问（nginx和页面都会被打包到一个镜像中），所以域名那直接写localhost就可以了，并且还要注意如果是云服务器前端的页面的端口一定要暴露出去

第三步直接打包我们的页面

如果是静态页面直接打包
如果是VUE这种通过以下代码打包

npm run build

格式为tar.gz

第四步把nginx.conf上面的这段代码拷出来和第三步放一起

第五步放入Dockerfile脚本文件

文件内容如下

FROM nginx:1.15
RUN mkdir /usr/share/nginx/pethome_admin
RUN mkdir /usr/share/nginx/pethome_front
ADD ./pethome_admin.tar.gz /usr/share/nginx/pethome_admin
ADD ./pethome_front.tar.gz /usr/share/nginx/pethome_front
ADD ./nginx.conf /etc/nginx/conf.d/
WORKDIR /usr/share/nginx
RUN chmod -R a+rx * pethome_admin
RUN chmod -R a+rx * pethome_front   

第六步把前面的文件上传到Linux中

第七步构建镜像

进如到上传目录执行构建命令

docker build -t="pethome-nginx" ./

第八步创建容器

docker run -di --name=pethome_web -p 80:80 --link pethome:pethome_service pethome-nginx

这里的80端口也要和上面的端口一起在云服务中的安全组暴露出去