精华内容
下载资源
问答
  • 如何使用pm2部署前端项目

    千次阅读 2019-12-06 18:35:15
    前端部署有很多种方式,场景的有Jenkins,pm2,docker等技术,今天主要介绍使用pm2部署,因为公司一直在使用,也一直想彻底的理解部署的流程。 pm2是什么? PM2 是一个守护进程管理器,将帮助您管理和保持应用程序24...

    前端部署有很多种方式,场景的有Jenkins,pm2,docker等技术,今天主要介绍使用pm2部署,因为公司一直在使用,也一直想彻底的理解部署的流程。

    pm2是什么?

    PM2 是一个守护进程管理器,将帮助您管理和保持应用程序24在线,好强大呀,牛B!!!
    在这里插入图片描述

    官方文档地址:连接

    开始上手

    使用要从安装开始yarn global add pm2,现在在项目中有这样一个文件夹app.js代码如下

    //https://xxx.com/user/1.html
    //https://xxx.com/user/2.html
    const express = require('express')
    const app = express()
    const routerUser = express.Router()
    app.use("/user", routerUser)
    routerUser.get("/1.html", function (req, res) {
      res.send("1")
    })
    routerUser.get("/2.html", function (req, res) {
      res.send("2")
    })
    app.listen(4000)
    

    使用pm2 start app.js启动
    在这里插入图片描述
    页面会显示出应用的信息,说明启动成功,如果不想要了,使用命令进行删除。删除的时候通过名字,在表格中可以查到的。

    pm2 delete app
    

    通过上面的命令启动的应用并不会创建集群,并没有进程守护。

    通常我们会写个配置文件ecosystem.config.js进行配置。通过命令生成配置文件,文件的名字是固定的,不得更改。

    pm2 ecosystem
    
    module.exports = {
      apps : [{
        name: 'API',
        script: 'app.js',
    
        // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
        args: 'one two',
        instances: 1,
        autorestart: true,
        watch: false,
        max_memory_restart: '1G',
        env: {
          NODE_ENV: 'development'
        },
        env_production: {
          NODE_ENV: 'production'
        }
      }],
    
      deploy : {
        production : {
          user : 'node',
          host : '212.83.163.1',
          ref  : 'origin/master',
          repo : 'git@github.com:repo.git',
          path : '/var/www/production',
          'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production'
        }
      }
    };
    
    pm2 start ecosystem.config.js
    

    部署到服务器上

    之前我们都是在本地尝试启动我们的项目,但是开发完成,我们需要部署到测试环境怎么办,那就部署项目了,如果我们的项目是Vue和React写的静态页面,通常在服务器端会启动Nginx作为静态资源访问,把资源放到指定的目录。

    如果你没有服务器,建议购买一台服务器,阿里云连接

    我们用vue create hello-world创建一个Vue应用,然后是在项目里面使用pm2 ecosystem生成配置文件,我们使用pm2配置文件可以登录到远程服务器,然后执行命令,拉代码和构建等操作,来实现部署。

    module.exports = {
      deploy : {
        production : {
          user : 'node', // 以什么身份登录远程服务器,这里是node用户登录,建议使用root用户,权限更大
          host : '192.168.4.142', // 远程服务器地址,需要配ssh登录
          ref  : 'origin/master', // 需要部署的分支
          repo : 'git@github.com:repo.git', // 代码git地址,需要配ssh登录
          path : '/var/www/production', // 文件存放的地址
          'post-deploy' : 'npm install && npm run build' // 拉完代码需要执行的构建命令
        }
      }
    };
    
    

    首先本地的电脑要能通过ssh登录服务器,服务器要能通过ssh登录到Git服务器,这两部操作都完成了,把代码推送到Git服务器,本地代码执行

    首次部署执行的命令(只执行一次)
        $ pm2 deploy ecosystem.config.js production setup
    
    之后部署执行的命令
        $ pm2 deploy ecosystem.config.js production
    

    在这里插入图片描述

    如图片提示的内容表示部署成功了,登录到你的服务器,可以看到我们的文件已经传到服务器了
    在这里插入图片描述

    nginx配置是这样的,路径地址要保持一致,/var/www/production默认的源文件在current或者source里面,打包的目录是dist,所有目录目录要加上/var/www/production/current/dist
    在这里插入图片描述
    代码仓库地址:连接

    展开全文
  • PM2 是一个带有负载均衡功能的Node应用的进程管理器。当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载,PM2是比较合适的。 但我们一般都是在本地启动我们的应用,那怎么部署到...

    PM2 是一个带有负载均衡功能的Node应用的进程管理器。当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载,PM2是比较合适的。

    但我们一般都是在本地启动我们的应用,那怎么部署到服务器呢?

    如果还没有云服务器,小编建议买一台哈,推荐睿江云

    第一步:安装nodejs 和 PM2

    安装nodejs

    
    curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
    ## 如果执行失败 报 curl sudo:command no found,那就需要安装一些库
    apt-get update
    apt-get install -y curl
    apt-get install sudo
    

    安装PM2

    npm install -g pm2
    

    第二步:上传项目

    我们用vue create hello-world创建一个Vue应用,然后是在项目里面使用pm2 ecosystem生成配置文件,我们使用pm2配置文件可以登录到远程服务器,然后执行命令,拉代码和构建等操作,来实现部署。

    module.exports = {
      deploy : {
        production : {
          user : 'node', // 以什么身份登录远程服务器,这里是node用户登录,建议使用root用户,权限更大
          host : '192.168.4.142', // 远程服务器地址,需要配ssh登录
          ref  : 'origin/master', // 需要部署的分支
          repo : 'git@github.com:repo.git', // 代码git地址,需要配ssh登录
          path : '/var/www/production', // 文件存放的地址
          'post-deploy' : 'npm install && npm run build' // 拉完代码需要执行的构建命令
        }
      }
    };
    

    首先本地的电脑要能通过ssh登录服务器,服务器要能通过ssh登录到Git服务器,这两部操作都完成了,把代码推送到Git服务器,本地代码执行

    部署执行的命令

    npm install // 安装依赖
    $ pm2 deploy ecosystem.config.js production
    
    展开全文
  • pm2快速部署前端项目

    2020-03-09 14:29:02
    3.根据是否需要开机自启动安装 pm2-windows-service等 4.安装http-service或者https-service 5.安装PM2 6. pm2 start 1(/root/.nvm/versions/node/v10.16.3/bin/http-server)--name 2(pc-dist --)...

    1.环境哪个都可以,只有路径不同,

    2.安装node.js  官方直达链接  https://nodejs.org/en/

    3.根据是否需要开机自启动安装 pm2-windows-service等

    4.安装http-service或者https-service npm install -g http-service,并且找到相应路径

    5.安装PM2  npm install -g pm2

    6.

    pm2 start  1/root/.nvm/versions/node/v10.16.3/bin/http-server--name  2pc-dist --3 -p 8083 4/root/pc-dist/

    1为刚才http-service文件路径名

    2为部署项目的名字

    3为端口号

    4为文件所在地址

    如果只跳出

    恭喜你,完成了项目部署!!!!!!!!!!

    pm2常用命令

    查看列表   pm2 list

    启动进程 pm2 start 文件路径 

    查看单个  pm2 ls [uid,name]

    删除单个 pm2 delete [uid,name]

    删除所有 pm2 delete all

    展开全文
  • 这两天空出来个服务器,实战下宝塔面板结合pm2进程管理工具部署前端项目 来介绍下宝塔面板 宝塔Linux面板是提升运维效率的服务器管理软件,支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理...

    这两天空出来个服务器,实战下宝塔面板结合pm2进程管理工具部署前端项目

    来介绍下宝塔面板

    宝塔Linux面板是提升运维效率的服务器管理软件,支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。
    有20个人的专业团队研发及维护,经过200多个版本的迭代,功能全,少出错且足够安全,已获得全球百万用户认可安装。

    个人理解为:一个可视化运维的控制面板。

    官网地址: https://bt.cn

    安装

    首先准备一台纯净的linux服务器,本文以CentOS7.6 64位为例。
    以下主机商必看(开端口教程,不开不能用):
    腾讯云:https://www.bt.cn/bbs/thread-1229-1-1.html
    阿里云:https://www.bt.cn/bbs/thread-2897-1-1.html
    华为云:https://www.bt.cn/bbs/thread-3923-1-1.html

    1.使用ssh工具连接服务器终端,填写服务器相关信息,进入终端,执行以下脚本。

    墙裂推荐开源终端 electerm

    yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
    

    安装成功后是这个样子:

    安装成功

    Bt-Panel 面板地址
    username 面板账号
    password 面板密码

    浏览器中打开面板地址输入账号密码即可进入面板首页。

    面板设置中可以对面板相关信息进行设置,包括给面板绑定域名、修改初始用户名和密码等等。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Enue8jA2-1613714466299)(https://static.iiter.cn/article/f17905147afbc6ea14038f79b1ad506b.png)]

    软件商店中有很多开发、运维常用的工具,比如Mysql,Nginx等等,这里列举下笔者的安装列表,大家可以参考下一并安装。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50nXSqDc-1613714466352)(https://static.iiter.cn/article/10802b46aa33386abbb3bfce587b2ed7.png)]

    部署nuxtjs项目

    这里以部署nuxtjs项目为例,在左侧菜单栏中点击文件,将nuxt项目对应的所有文件上传至服务器(在线上传或使用ftp上传),并在终端进入项目根目录安装依赖以及打包构建。

    上传目录

    安装依赖&&打包构建

    npm install && npm run build
    

    由于我们已经在软件商店中安装了nodejs环境和pm2,直接在终端中使用pm2启动nuxt工程即可。

    pm2 start npm --name "mynuxt" -- run start
    

    不出意外的话,浏览器地址输入 ip + 端口号 即可访问网站。

    注意:

    1. nuxt的默认端口号是3000,那就一定!一定!要开放服务器的3000端口,可参考顶部的开端口教程。
    2. nuxt项目中默认host是localhost,如果启动出现问题可在nuxt.config.js中使用server将其重写为0.0.0.0或者127.0.0.1。当然,端口号也可以自定义
    module.exports = {
      server: {
        port: 8000, // default: 3000
        host: "0.0.0.0" // default: localhost
      }
    }
    
    绑定域名

    点击面板菜单拦中的网站,添加站点,输入域名,写好备注,选择根目录,提交

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLyGz6dG-1613714466361)(https://static.iiter.cn/article/72a2725e289f91d3e9bd66c4b64d5a4d.png)]

    如果该域名已经指向至该服务器的ip地址,则输入域名即可访问了。

    开启SSL

    点击设置,切换至ssl,四种方式傻瓜式配置ssl,笔者这里使用的是腾讯云免费的ssl证书,记得打开强制https

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nrx1G6FB-1613714466365)(https://static.iiter.cn/article/07c85c285905230cd74066fc4c72e264.png)]

    使用域名访问网站,发现会强制https。

    艾特网就是一个典型的nuxt项目:艾特网 - 程序员导航站

    其他诸如此类的express,koa,eggjs等项目的部署都大同小异。这里不再赘述。

    1. 看到这里啦,点个 支持一下吧。
    2. 关注公众号 前端糖果屋 互相学习鸭。
    3. 添加微信 itRobot ,拉你进 技术交流群 探讨人生。
      扫码立即关注
    展开全文
  • 0x00 前言前端部署项目到测试环境,简单粗暴的直接用 gulp 来写,详细流程可以看我总结的文档:前端代码部署pm2 大家应该都知道,主要是用来管理 node 进程,但是同样可以用来部...
  • react, node 前端项目自动部署 环境 本地 macos mojave(windows 同理): pm2, git 服务器 ubuntu 14: pm2, git 工具 代码托管github(或gitee,gitlab等等) 部署工具 pm2 过程 配置 将ssh密钥添加到...
  • 一,使用pm2部署vue项目(适用于linux服务器)     1.需安装的软件(winscp,putty);     2.使用winscp将文件放置到配置好的服务器中,并将打包好的文件放到根目录中;  ...
  • Ubuntu 部署前端项目

    2021-08-24 16:46:07
    Ubuntu部署前端项目 搭环境 #nginx apt-get install nginx #nodejs apt-get install nodejs #mogonDB 有需要的话下载 apt-get install mongodb #git apt-get install git #npm换源 npm config set registry ...
  • pm2部署nodejs项目

    2019-10-10 11:04:36
    安装: 最新的PM2稳定版可通过NPM进行安装: npm install pm2@latest -g 用法: 启动,守护和监控应用程序的最简单的方法是使用以下命令行: pm2 start app.js...
  • Jenkins部署前端项目

    千次阅读 2019-10-21 16:16:37
    1.Jenkins部署前端项目 在使用Jenkins部署前端项目时需要搭建好 JenKins 的自动化部署环境。 1)Linux服务器上安装好了JDK软件,并配好了环境变量 2)Linux服务器上安装好 Jenkins 软件,并安装了 JenKins 推荐安装...
  • 前端部署项目

    万次阅读 2019-07-21 12:33:08
    项目的dev分支上 $npm run build 在项目dev分支全局安装http-sever $npm i http-server -g 启动http-sever $http-server -c10 //后面的c-10是缓存,可以写,也可以不写 如果发现这里启动不了,就去...
  • PM2 部署 nodejs 项目

    2019-07-26 10:24:49
    目前似乎最常见的线上部署nodejs项目的有forever,pm2这两种。 使用场合: forever管理多个站点,每个站点访问量不大,不需要监控。 pm2 网站访问量比较大,需要完整的监控界面。 PM2的主要特性: 内建负载均衡(使用...
  • 但是要部署多个前端项目,那么怎么办呢?笔者知道的办法有俩种,一种是写配置文件的方式,另外一种是命令的方式。 第一种办法:写配置文件 配置详情请看官网:...
  • 自动化部署前端项目实战一">docker自动化部署前端项目实战一 本文适用于个人项目,如博客、静态文档,不涉及后台数据交互,以部署文档为例。 <h2

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,350
精华内容 2,140
关键字:

pm2部署前端项目