使用Docker完成前端部署

使用Docker完成前端部署

1.打包前端项目

1. 通过项目中的package.json文件,找到“build”运行进行打包

2. 打包成功后生成dist文件夹,就是打包好的项目

3. 在根目录中创建一个docker文件夹中创建nginx.conf配置文件, 同时在根目录中创建一个Dockerfile文件

图例:

  1. nginx.conf
server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_***p_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    
    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;
    location / {
        try_files $uri /index.html;
    
}

1)gzip on; - 启用Gzip压缩功能。

2)gzip_min_length 1k; - 指定压缩的最小文件大小。只有大于等于1千字节的文件才会被压缩。

3) gzip_***p_level 9; - 设置Gzip压缩的级别。级别从1到9,9为最高压缩比,但也会消耗更多的CPU资源。

4) gzip_types - 指定需要进行Gzip压缩的文件类型。在这个例子中,配置了多种类型的文件,包括纯文本文件(text/plain)、CSS文件(text/css)、JavaScript文件(text/javascript、application/json、application/javascript、application/x-javascript)以及XML文件(application/xml)。

5) gzip_vary on; - 在HTTP响应头中添加Vary标头,以通知缓存服务器根据A***ept-Encoding头来提供正确的压缩版本。

6) gzip_disable "MSIE [1-6]\.”; - 禁用特定的浏览器压缩。在这个例子中,它禁用了Inter*** Explorer 1至6版本的Gzip压缩。这是因为早期版本的IE在处理Gzip压缩时可能存在兼容性问题。

  1. Dockerfile
FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

1)FROM nginx: 安装nginx

2)WORKDIR : 工作目录,容器中执行命令时的默认位置

3)COPY:拷贝,从执行目录拷贝指定文件打到容器中的指定目录

4)EXPOSE:声明容器内的服务将监听的端口(指令仅仅是一种文档化的操作,它并不会自动在容器启动时打开这些端口或配置网络连接)

5)CMD 指定容器启动时要执行的默认命令或可执行文件的指令

4.压缩文件为了上传到服务器(按照上图为例)

把三个红框,压缩成一个压缩包。

2.服务器项目上线

1.docker安装

参考文档:

2.压缩包上传到服务器

把打包好的user-center-frontend.zip上传到服务器的指定目录,这里以/root/myapp目录为例

1.创建myapp目录

mkdir /root/myapp 

2.把压缩包放在目录里

3.进到myapp文件夹,解压文件

unzip user-center-frontend.zip -d user-center-frontend

4.进入user-center-frontend文件夹执行命令,后面"."不要忽略

docker build -t user-center-frontend:v0.0.1 .

docker build -t 镜像名称:版本号 .

5.运行docker镜像

1.查看docker 镜像
docker images

2.根据打包好的镜像,并运行docker
docker run -d -p 80:80 user-center-frontend:v0.0.1 

3.查看容器运行状态
docker ps

项目部署成功

转载请说明出处内容投诉
CSS教程_站长资源网 » 使用Docker完成前端部署

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买