ps：前端打包也是基础的， npm build
注意：前端工程中配置的代理在Nginx中会不起作用，得在nginx.config中配置代理
1、目录以及所需文件
# 当前目录
pwd
/home/iknow/vue
# 将打包的zip文件解压
# unzip这个工具用yum -y install zip即可安装
# 解压
unzip dist.zip
# 用linux的tar进行归档压缩
tar -czvf dist.tar.gz dist
# 所需文件
ll
总用量 4816
drwxr-xr-x. 6 root root 88 3月 22 16:17 dist # 可删
-rw-r--r--. 1 root root 2450209 3月 22 16:50 dist.tar.gz # 这个是需要的
-rw-r--r--. 1 root root 2464884 3月 22 16:19 dist.zip # 可删
-rw-r--r--. 1 root root 269 3月 22 16:47 docker-entrypoint-nginx.sh
-rw-r--r--. 1 root root 732 3月 22 16:25 Dockerfile
-rw-r--r--. 1 root root 3121 10月 9 10:05 nginx.conf.template2、Dockerfile文件内容
FROM nginx:latest
ARG ARG_NGINX_PORT=80
ENV NGINX_PORT=${ARG_NGINX_PORT} \
FORWARD_SERVER_HOST=127.0.0.1 \
FORWARD_SERVER_PORT=8099 \
API_PREFIX=api
WORKDIR /usr/share/nginx/html
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime &&\
echo "Asia/Shanghai" > /etc/timezone
ADD dist.tar.gz /usr/share/nginx/html/
COPY nginx.conf.template /etc/nginx/nginx.conf.template
COPY docker-entrypoint-nginx.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint-nginx.sh
ENTRYPOINT ["docker-entrypoint-nginx.sh"]
EXPOSE ${ARG_NGINX_PORT}
CMD nginx -g "daemon off;"3、docker-entrypoint-nginx.sh文件内容
ps：这个文件是修改容器的环境变量，可以在启动时加入参数，达到动态修改配置的目的
基于envsubst这个命令实现
#!/bin/sh
set -eu
export NGINX_PORT=${NGINX_PORT:-80}
envsubst '${NGINX_PORT} \
${FORWARD_SERVER_HOST} \
${FORWARD_SERVER_PORT} \
${API_PREFIX} \
'\
< /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf
exec "$@"4、nginx.conf.template文件内容
ps：这里需要注意，如果前端vue项目用的history模式就需要和下列第一个location中一样，否则用上一行被注释的，不然只能访问到前端项目的首页，其他页面都是访问不了的。
这里可以参考vue-router官网： HTML5 History 模式 | Vue Router
#user nobody;
worker_processes 1;
#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 {
client_max_body_size 100m;
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr:$server_port - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" '
'$upstream_addr';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
upstream forward-server {
server ${FORWARD_SERVER_HOST}:${FORWARD_SERVER_PORT};
}
server {
listen ${NGINX_PORT};
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
#root html;
root /usr/share/nginx/html/dist;
# index index.html index.htm; # 其他模式是这个
try_files $uri $uri/ /index.html; # history模式用这个
expires 1d;
}
# 匹配前端调用的uri前缀，转到相应的后端服务器容器的接口上
location ^~/${API_PREFIX}/ {
proxy_pass http://forward-server/;
}
#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;
}
}
}5、构建前端的镜像
ps：目录参考步骤1
docker build -t iknow-vue:1.0.0 .6、创建并运行前端容器
ps：这里的参数很多
-
FORWARD_SERVER_HOST 后端的ip，因为我们是创建了一个专属于iknow的网卡，所以这里直接用后端容器名即可
-
FORWARD_SERVER_PORT 后端的端口，
-
API_PREFIX 前端请求后端的请求头
-
network iknow 将容器加入之前创建的容器中
docker run --name iknow-vue -d -p 49154:80 \
-e FORWARD_SERVER_HOST=iknow-springboot \
-e FORWARD_SERVER_PORT=8099 \
-e API_PREFIX=api \
--network iknow iknow-vue:1.0.07、容器相关操作（用于调试）
# 查看日志最新的
docker logs iknow-vue
# 查看日志动态更新
docker logs -tf iknow-vue
# 交互方式进入容器
docker exec -it iknow-vue /bin/bash
# 删除相关操作
# 删网卡
docker network rm iknow
# 删容器
docker rm -f iknow-vue
# 删镜像
docker rmi iknow-vue:1.0.0最后看一下网卡
**
