0
点赞
收藏
分享

微信扫一扫

docker部署前端iknow-vue

目标践行者 2022-04-04 阅读 77

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.template

2、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.0

7、容器相关操作(用于调试)

# 查看日志最新的
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

最后看一下网卡

**

 

举报

相关推荐

0 条评论