docker部署前端代码

just小千

已于 2023-04-03 17:25:40 修改

阅读量958

点赞数

于 2023-01-29 20:05:14 首次发布

本文链接：https://blog.csdn.net/weixin_43207208/article/details/128793486

版权

生活实用小妙招专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如题，最近在业务开发之余，涉及了一些代码部署的知识，借此机会总结记录一下，重复记忆

1. 打开服务器

首先要做的就是打开服务器，原谅我是一个命令行如何打开服务器都不知道的小白，所以就从最基础开始记录吧

ssh连接服务器ssh 用户名@ip地址，然后输入密码，进入服务器
跳板机—有时候需要将某个服务器作为跳板机，跳到目的服务器中去，方法是一样的，在服务器中继续ssh连接下一个服务器

除此之外，还可以使用可视化工具实现方便快捷的服务器连接，目前我用的是Royal TSX ，日常使用还阔以，如果有更好的工具欢迎交流

2. docker安装

docker是什么

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows操作系统的机器上，也可以实现虚拟化。

总而言之，docker就是一个造福大家，解放双手的神器，没有docker之前，服务器部署复杂到想哭（特别针对我这种手残），有了docker之后，只需咔咔几个命令，就能成功部署，无比爽

docker常用的命令

docker images 查看服务器中的docker镜像列表
docker pull 镜像名:tag 拉取镜像，加tag表示拉取的是指定版本
docker ps -a 查看docker中所有的容器列表，去掉-a显示的是所有运行中的容器列表
docker rmi -f 镜像名/镜像ID 删除镜像，只有当前镜像没有被任何容器使用才能被删除，可一次性删除多个
docker exec -it 容器名/容器ID /bin/bash 进入某个容器内部
docker stop 容器名/容器ID以及docker start 容器名/容器ID 关闭和打开，重新启动docker，修改配置后需要重新打开才能完成
docker cp 容器ID/名称: 容器内路径容器外路径 从容器内部将文件拷出
docker cp 容器外路径容器ID/名称: 容器内路径 从外部将文件拷到容器内
docker commit -m="提交信息" -a="作者信息" 容器名/容器ID 提交后的镜像名:Tag 构建一个新的镜像
docker run -it -d --name 名字 -p 8888:9999 --restart=always -v 宿主机文件存储位置:容器内文件位置镜像名: Tag /bin/bash运行镜像
– -it 与容器进行交互式启动
– -d 可后台运行容器（守护式运行）
– --name 你给这个容器起的别名 给容器起一个好听容易记的别名
– -p 8888:9999 将宿主机端口（8888）和容器端口（9999）进行映射
– --restart=always 表示该容器随docker服务启动而自动启动
– -v 宿主机文件存储位置:容器内文件位置 将容器内指定文件挂在到宿主机对应位置

理论上，docker用来部署前端代码的话当前的命令已经足够使用，关于docker的其他更高级用法，请参考官方文档

怎么使用docker来部署前端项目

一般部署前端项目，都是将项目打包好，安装nginx，修改对应的conf文件，然后把打包好的文件丢到服务器中，之后就可以愉快的进行访问了

这个过程中主要涉及的是nginx的安装，以及项目的上传两个模块，现在先po一下脚本代码

const Client = require('ssh2').Client;
const ChildProcess = require('child_process');
const fs = require('fs');

let SSHClient = new Client()

let buildProject = ChildProcess.exec(
  'tar zcvf dist.tar.gz ./dist',
  () => {}
);
buildProject.stdout.pipe(process.stdout);
buildProject.on('exit', () => {
  uploadProject()
});

const uploadProject=()=> {
  SSHClient
    .on('ready', () => {
      SSHClient.sftp((err, sftp) => {
        console.log("it is ready")
        sftp.fastPut(
          './dist.tar.gz', // 本地 dist.tar.gz 文件路径
          '/home/admin/dist.tar.gz', // 服务器 dist.tar.gz 文件路径
          {},
          (err, result) => {
            console.log("upload success")
            SSHClient.shell ((err,stream)=>{
              stream.end(
            `
            docker cp ./dist.tar.gz nginx:/usr/share/nginx/html
            docker start nginx
            rm -rf dist.tar.gz
            docker exec -it nginx /bin/bash
            cd /usr/share/nginx/html
            tar zxvf dist.tar.gz
            rm -rf dist.tar.gz
          exit
          docker stop nginx
          docker start nginx
          exit
                `
              )
            })
              console.log("delete success")
            }
        );
      });
    })
    .connect({
      host: '', // 服务器 host
      port: 22,  // 服务器 port
      username: '', // 服务器用户名
      password: ' ' // 服务器密码
    })
   
}

具体操作步骤以及注意事项如下：

docker pull nginx docker 下载nginx images
docker run -it -d --name nginx -p 8888:9999 --restart=always nginx /bin/bash 启动nginx
docker exec -it nginx /bin/bash 进入nginx container 的目录
cd /etc/nginx 进入nginx.conf所在目录
vim nginx.conf 编辑conf文件，conf文件如下，具体配置需要根据实际进行调整

include /config/nginx/nginx.conf;
 # 客户端连接保持会话超时时间，超过这个时间，服务器断开这个链接。
 keepalive_timeout 60;
 # 上传文件大小限制
 client_max_body_size 10m;

http {
    gzip on;
    gzip_min_length 1k; 
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; 
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    include /etc/nginx/mime.types;
    default_type  application/octet-stream;
    keepalive_timeout 60;
    client_max_body_size 10m; 

    server {
        listen       80;
        root /usr/share/nginx/html; 
        index index.html; 
        error_page    404         /index.html; 
        location ^~ /api/{
            proxy_pass 后端接口地址/;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
    }    
}

ps: docker中可能没有安装vim，需要通过apt-get install vim进行安装，如果报错的话，可以先执行apt-get update 再重新执行apt-get install vim
6. 本地打包项目，然后上传到服务器中——因为没研究出来直接从本地上传到服务器的docker container的方法，所以从本地上传服务器，再从服务器复制到docker container对应目录中
7. 在浏览器中输入域名/IP地址，完事，撒花🎉🎉🎉