jjzjj

docker部署前端代码

just小千 2024-05-09 原文

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

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: ' ' // 服务器密码
    })
   
}

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

  1. docker pull nginx docker 下载nginx images
  2. docker run -it -d --name nginx -p 8888:9999 --restart=always nginx /bin/bash 启动nginx
  3. docker exec -it nginx /bin/bash 进入nginx container 的目录
  4. cd /etc/nginx 进入nginx.conf所在目录
  5. 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地址,完事,撒花🎉🎉🎉

进阶版——利用dockerfile部署代码

之前的docker部署方式还处于初级版本,本质上还是基于nginx的部署,那有没有可能直接把项目打成一个包,这样在docker中直接运行项目的images就可以成功部署,答案是肯定的,而且现在也已经有了很成熟的方案。接下来我们就开始吧~~~

3. 总结

整个过程说简单也不简单,最近部署了四五个项目,发现里面的坑还是有不少的,docker部署可以解放双手,但是也需要更加熟悉命令,有空还需要继续努力的深入学习~~

有关docker部署前端代码的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中,它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  3. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  4. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

  5. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的

  6. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  7. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态,而无需发出第二个请求。有没有办法用另一种方法做到这一点?我一直在查看文档,但似乎找不到我要找的东西。 最佳答案 在我看来,除非您需要一些真正的低级访问或控制,否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  8. 程序员如何提高代码能力? - 2

    前言作为一名程序员,自己的本质工作就是做程序开发,那么程序开发的时候最直接的体现就是代码,检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知,程序开发的水平提升是一个循序渐进的过程,每一位程序员都是从“菜鸟”变成“大神”的,所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力,尤其是新晋程序员的代码能力有很大的提升空间的时候,需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点,只要把握住这些方面,就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目,如有机会可以亲自参与开源

  9. ruby-on-rails - Ruby on Rails 可以部署在 Azure 网站上吗? - 2

    我可以在Azure网站上部署RubyonRails吗? 最佳答案 还没有。目前仅支持.NET和PHP。 关于ruby-on-rails-RubyonRails可以部署在Azure网站上吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/12964010/

  10. 7个大一C语言必学的程序 / C语言经典代码大全 - 2

    嗨~大家好,这里是可莉!今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值,将两个值的内容进行交换。这里提供两种方法来进行交换,第一种为创建临时变量来进行交换,第二种是不创建临时变量而直接进行交换。1.创建临时变量来

随机推荐