精华内容
下载资源
问答
  • 本文主要讲不使用 nginx 如何部署前端项目,静态页面和 node 的项目同样适用。下面的介绍中,暂时先没有使用到 jenkins 去进行自动部署,就是自己登录服务器进行操作的步骤。 本文可以让你学到什么 写这篇文章的目的...

    本文主要讲不使用 nginx 如何部署前端项目,静态页面和 node 的项目同样适用。下面的介绍中,暂时先没有使用到 jenkins 去进行自动部署,就是自己登录服务器进行操作的步骤。

    本文可以让你学到什么

    写这篇文章的目的是让新手可以自行登录服务器进行前端项目部署,不需要依赖运维和后端,毕竟大家时间都有限,自力更生很重要。

    具体操作步骤

    登录服务器

    前提是你要有一台可以登录的服务器哦,这个可以和你的运维小哥哥申请,申请完成后,主要有三项东西比较重要,用户名密码服务器的 ip 和端口号

    在 Mac 上可以直接使用命令行操作,window 上需要有登录虚拟机的工具,这个自行百度吧,网上有很多。下面你看到的操作和截图都是在 Mac 上进行。

    在 iTerm2 中输入一下命令进行服务器的登录操作:

    ssh username@ip:port
    # username 是你登录服务器的用户名
    # ip 是机器的ip
    # port 是机器的端口号
    

    接下来会让你输入密码,输入完成之后就登上自己的服务器咯。你肯定会想,如果后续每次登录都需要输入密码,是不是很烦,我们可以配置一个免密登录,后续就方便很多了,具体配置免密可以参考我之前写的一篇文章。传送门

    安装 node

    服务器部署前端项目,node 是必须的,安装的步骤也很简单,直接参考菜鸟教程即可,相信大家按照步骤操作,肯定是没啥问题的,记得要选择好你 linux 的系统,有的是 Ubuntu,有的是 CentOS。

    上传项目

    我们在登录到服务器上之后,进入到自己想要存放项目的目录,然后将自己的项目上传到服务器上。前面我也提到了,我们这篇文章暂时不使用 jenkins 自动部署,所以需要我们自己将项目进行上传,我们可以使用 git 把项目拉下来,也可以使用 linux 命令将本地项目上传到服务器上。

    这里推荐使用 git,方便快捷,就和你本地拉 git 项目是一样的,如果想知道怎么将本地文件上传到服务器上,可以看一下我之前写的Linux 常用命令,使用 scp 的方式即可。

    使用 git 拉取项目,你可以先在你的机器上使用 git --version 查看是否有 git,并且版本是多少,如果有,可能是 linux 自带的,如果没有,可以根据 git 如何安装去进行操作。

    linux 自带的 git 在拉取项目的时候,可能会出现以下错误:

    The requested URL returned error: 401 Unauthorized while accessing
    

    这个是因为 git 的版本太低了,我们将 git 的版本进行升级即可,具体操作如下:

    • 安装依赖
    yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc
    yum install  gcc perl-ExtUtils-MakeMaker
    
    • 卸载老版本
    yum remove git
    
    • 下载新版并解压安装
    wget https://github.com/git/git/archive/v2.2.1.tar.gz
    tar zxvf v2.2.1.tar.gz
    cd git-2.2.1
    make configure
    ./configure --prefix=/usr/local/git --with-iconv=/usr/local/libiconv
    make install
    echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/bashrc
    source /etc/bashrc
    
    • 再次查看 git 版本
    git --version
    

    输出 git 版本说明安装成功了。

    git version 2.2.1

    再次拉取代码就可以成功了。

    使用 pm2

    前面也说了,我们暂且不讨论使用 nginx,先使用 pm2 进行服务的管理。

    列举一下 pm2 的主要特性吧,方便大家了解:

    • 0 秒停机重载,自动重启
    • 内建负载均衡
    • 停止不稳定的进程
    • 性能监控
    • 错误日志

    我们这里主要使用 pm2 运行服务,其他功能,大家可以下去慢慢了解。

    安装 pm2

    npm i -g pm2
    

    安装完成之后使用 pm2 -v 查看版本号,这个时候可能又会有问题,就是提示 pm2 的命令不存在,如下:

    bash: pm2: command not found
    

    如果你的服务器没提示这个错误,恭喜你,避免了一个大坑,如果出现,也不必紧张,我教你怎么解决。

    这个是因为软连接的问题,我们安装其他的 npm 全局包也会出现同样的问题,配置一下环境变量就可以了。

    # 用一个通用的命令配置环境变量
    ~$ echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc
    
    # 上面的命令中使用 npm prefix -g 获取node安装目录
    
    # 再执行命令
    ~$ pm2 -v
    3.5.1
    

    这个时候就解决 node 软连接的问题了,后续安装其他的 npm 包也不会有问题了。

    pm2 常用命令

    既然使用了 pm2,那我们就要知道一些它常用的命令,比如跑服务,终止服务,查看日志。

    • 启动服务
    pm2 start app.js --watch
    
    • 查看当前服务列表
    pm2 list
    

    • 重启
    pm2 restart app_name || pid
    
    • 停止
    pm2 stop app_name || pid
    
    • 查看某个进程的信息
    pm2 show app_name || pid
    

    会出现你服务的详细信息:

    • 查看日志
    pm2 log app_name | pid
    

    具体可以跑一个服务起来,然后查看一下试试。

    启动服务

    node 服务

    服务器上目前已经有 node,npm,pm2 和我们自己的项目了,这个时候进入到项目里边去,执行安装依赖,启动服务即可。

    npm install
    
    pm2 start app.js --watch
    

    这只是一个简单的例子,真正的项目,可能会存在启动脚本以及项目中会有 pm2 的配置文件,这个要具体看你的项目,本文主要是帮助新手了解项目的部署,想要详细了解可以后续关注我的掘金及公众号或者自行搜索解决。

    前端静态页面

    如果是前端静态页面,我们想要在服务器上跑一个服务,不使用 nginx 的话,可以用 pm2 配合 http-server 进行服务的启动。

    pm2 start http-server --name my-file-server -- -p 8080 -d false
    

    如果提示你 http-server 不存在的话,可以使用以下命令重新操作:

    which http-server
    # 会输出http-server的目录,如 /usr/bin/http-serve
    
    # 接下来在使用http-server时,把目录补上即可
    pm2 start /usr/bin/http-server --name my-file-server -- -p 8080 -d false
    

    这个时候你就可以根据 服务器的ip:port/xx 去进行访问了。

    其他问题

    当你的服务启动成功后,在浏览器可能会被限制访问,这个时候你可以在服务器上使用 curl xxx 去进行访问,如果服务器访问没问题,那可能是因为服务器对于端口号没有开放,或者有防火墙,去搜索引擎一搜索都是解决办法。

    收获

    本文主要是实战篇,帮助对项目部署不是很熟悉的小伙伴了解项目部署,如果你有自己的服务器或者之前操作过,那这些可能对于你来说是小 case,如果你没进行过以上的操作,希望你可以去腾讯或者阿里云买个服务器,也可以和自己公司运维申请一下测试环境自己部署,去实战一下,毕竟学习了一定要实践之后,才能发现问题在哪,才能记忆更深刻。

    希望本文对你有帮助,后续还会出一些比较深入的实战篇,大家可以关注我的掘金和公众号,有更新第一时间推送。

    阅读完后两部曲

    1. 非常感谢各位花时间阅读完,麻烦各位动动手指,点个赞,分享一下,您的鼓励是我前进的动力。
    2. 顺便希望各位关注一下我的公众号,新的文章第一时间发到公众号,公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点,并且还有非常吸引人的个人自费抽奖活动哦~

    展开全文
  • linux部署前端react项目

    千次阅读 2019-11-06 14:42:09
    一、配置linux环境 1、安装node和npm 1)在node官网下载对应node安装包:http://nodejs.cn/download/ 可以通过命令:uname -a 查看当前系统内核; 也可通过命令:wegt +node下载地址(没用这个,可自行百度)...

     

    一、配置linux环境

    1、安装node和npm

    1)在node官网下载对应node安装包:http://nodejs.cn/download/

          可以通过命令:uname -a   查看当前系统内核;

          也可通过命令:wegt +node下载地址(没用这个,可自行百度)。

    2)下载之后上传到服务器,然后创建node目录,解压安装node

    tar xvf node-v12.13.0-linux-x64.tar.xz #解压
    mv node-v12.13.0-linux-x64 nodejs #改短名

        

    cd /nodejs/bin  #进入目录
    ./node -v  #查看node版本

     

          如果查看node版本时提示找不到GLIBCXX和GLIBC版本,需升级对应版本库(可自行百度)。

    3)配置软链接

          需要创建软链接,以便全局使用

    ln -s /usr/local/nodejs/nodejs/bin/node /usr/local/bin/node
    ln -s /usr/local/nodejs/nodejs/bin/npm /usr/local/bin/npm

        执行完此命令后可通过  node -v和npm -v查看相应版本信息

    4)配置node环境变量

    划重点:后面用serve -s部署项目时,会找不到指令

    进入配置文件 

    vi /etc/profile

    按 i 键进入编辑模式,进入文件末尾添加:

    export NODE_HOME=/usr/local/nodejs/nodejs/bin
    export PATH=$NODE_HOME:$PATH

    然后按 ESC 键 ,在控制台输入:wq,回车保存退出。

    使配置文件立即生效

    sourse /etc/profile

    5)安装serve

    npm install -g serve   

    部署react项目时需要用到此命令

    6)安装react脚手架

    npm install -g create-react-app

    二、打包、部署react项目

    1、打包项目

    我们是用creat-react-app创建的前端项目,在控制台使用如下命令可打包项目,项目根目录会生成build文件夹

    npm run build
    

    将文件夹打包发送至linux服务器,解压。

    然后记录build文件夹,使用如下命令启动项目

    serve -s

    到这步之后访问不成功,百思不得其解,欢迎大家吐槽,顺便告诉我怎么玩。

    三、其他部署方法

    经同事测试,可以将build文件夹放在tomcat里webapps下的ROOT文件夹中,然后需要将build文件夹的权限修改成可读可写可执行

    chmod 777  build

    然后直接启动tomcat即可访问项目。

    展开全文
  • Linux服务器部署前端项目到外网访问

    千次阅读 2020-07-16 17:21:14
    Linux服务器部署前端项目到外网访问 Linux服务器端安装Nginx 1、下载: $ wget http://nginx.org/download/nginx-1.13.6.tar.gz 2、解压缩 $ tar -zvxf nginx-1.13.6.tar.gz $ cd nginx-1.13.6 3、安装: $ ...

    在这里插入图片描述

    Linux服务器端安装Nginx

    1、下载:

    $ wget http://nginx.org/download/nginx-1.13.6.tar.gz

    2、解压缩

    $ tar -zvxf nginx-1.13.6.tar.gz

    $ cd nginx-1.13.6

    3、安装:

    $ ./configure

    $ make

    $ make install

    4、nginx前端项目代理地址配置

    在cd /usr/local/nginx/conf目录下配置nginx.conf文件只要修改root即可,(root为项目打包后文件的存放路径。),服务器端前端项目路径:/data/htdocs/website

    $ cd /usr/local/nginx/conf

    $ vim nginx.conf //进入编辑模式

    修改配置代码如下

    在这里插入图片描述

    退出编辑模式:按 esc

    :wq 保存并退出 或者 :wq! 强制保存并退出

    4、启动程序:

    $ cd /usr/local/nginx/sbin/

    $ ./nginx

    其他命令:

    5、停止Nginx

    $ ./nginx -s stop

    6、查看运行状态

    $ ps aux | grep nginx

    7、检查配置文件是否正确

    $ ./nginx –t

    8、查看nginx版本

    $ ./nginx -v

    9、配置文件位置

    $ /usr/local/nginx/conf/nginx.conf

    10、查看当前目录

    $ pwd

    安装遇到的问题:

    如提示错误信息:make: *** No rule to make target build', needed bydefault’. Stop.

    解决Centos7 解决安装Nginx编辑make && make install的不成功
    解决方案

    1、安装下面配置

    $ yum -y install make zlib-devel gcc-c++ libtool openssl openssl-devel

    2、重新configure

    $ ./configure

    3、编译

    $ make && make install

    另附项目官网访问地址,感谢您的关注。

    官网访问地址

    修改配置文件可能遇到的问题记录:

    1. 修改配置文件保存时报错: E45: ‘readonly’ option is set (add ! to override) , 可执行 :wq! 命令强制保存并退出
    展开全文
  • 先下载nodejs。 Global npm packages to install的值为: cnpm --registry=https://registry.npm.taobao.org 先创建一个demo 设置了一个全局构建参数: 选择代码源,我这里是用的SVN,所以以SVN来......

    先下载nodejs。

    Global npm packages to install的值为:

    cnpm --registry=https://registry.npm.taobao.org

    先创建一个demo

    设置了一个全局构建参数:

    选择代码源,我这里是用的SVN,所以以SVN来解说。

    构建环境选择刚才下载的node.js。

    执行命令,先将代码压缩,然后上传:

    echo /var/lib/jenkins/workspace/live-webHtml-88
    node -v #查看版本
    npm -v #查看版本
    #npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
    #npm init -f #下载package.json
    #npm install   #安装依赖
    #npm run build:dev  #打包环境
    rm -rf $webName.tar.gz
    tar -zcvf $webName.tar.gz *

    上传至服务器,并进行解压。

    完成后,保存,点击构建,控制台显示success则成功。

     

    展开全文
  • 简单的利用nginx部署前端项目 #1 服务器 #2 链接到远端 #3 前端项目build 使用打包后的dist文件夹 #4 express框架快速搭建后端环境 将#3的文件放入public目录下 #5 安装并配置nginx server_name location #6 重启 ...
  • 1.安装依赖包 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载并解压安装包 //创建一个文件夹 cd /usr/local mkdir nginx cd nginx //下载tar包 ...tar -xvf nginx-1.18.0.tar.gz ...
  • 自己写项目总归是要给人看的,对于测试或者上线最终都是要部署到服务器的,本文就是记录前端项目如何部署到nginx服务器 Linux安装Nginx (傻瓜式) CentOS7 中使用yum安装Nginx的方法 参照:CentOS7中使用yum安装...
  • Linux服务器上如何部署前端vue项目

    万次阅读 2020-11-10 23:10:11
    1.使用宝塔面板在服务器上安装nginx 2.前端vue项目进行打包会得到dist 3.将dist文件中的内容全部复制到nginx中的html文件夹中即可! 4.然后访问域名或者服务器ip即可。
  • Nginx简单部署前端打包项目 下载Nginx文件 http://nginx.org/en/download.html 测试系统为windows 解压后文件 主要修改配置文件 nginx-1.18.0/conf/nginx.conf Nginx启动 配置后直接点击Nginx.exe或者在nginx安装...
  • Linux部署前端vue项目

    千次阅读 2020-03-02 15:35:55
    步骤1: 首先下载并解压node.js cd /opt wget ...tar -zxvf node-v8.6.0-linux-x64.tar.gz 在默认情况下,node的bin目录是:/opt/node-v8.6.0-linux-x64/bin 然后把目录 ...
  • Jenkins部署前端项目

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

    千次阅读 2019-08-02 18:42:17
    本次我们说说Linux环境下通过Docker+Nginx打包部署一个Vue前端项目 先介绍以下部署思路: 1.vue项目打包,我们需要准备相应的部署文件及nginx配置文件, 2.执行部署文件生成镜像; 3.运行镜像并对外映射端口。 接...
  • vue.js+springBoot的部署方式
  • jenkins加docker自动部署前端项目 首先要在linux上安装docker注意不要用yum的自动安装,要安装版本高一点的docker,不然在容器内使用docker命令会出问题 然后docker pull jenkins/jenkins:lts, docker pull nginx, ...
  • 首先,说明一点,这是亲测可用、简单易行的,我整个项目是前后端分离的,后端已经部署成功,现在是在Ubuntu18.04上使用nginx服务器部署基于react脚手架前端项目的教程,如果是部署vue,相信也能触类旁通。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 749
精华内容 299
关键字:

linux部署前端项目

linux 订阅