精华内容
下载资源
问答
  • 步骤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 然后把目录 ...

    步骤1: 首先下载并解压node.js

    cd /opt

    wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

    tar -zxvf node-v8.6.0-linux-x64.tar.gz

    在默认情况下,node的bin目录是:/opt/node-v8.6.0-linux-x64/bin

    然后把目录 /opt/nodejs/bin 目录加入到环境变量:

    vim /etc/profile

    在最后一行的PATH变量(之前添加的,如果没添加过需要先执行$PATH看一下当前的环境变量的值)加入上面的目录(注意用冒号隔开):

    PATH=’/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/root/bin:/opt/tngx231/sbin:/opt/nodejs/bin’

    最后一定要记得source一下文件使配置生效:

    source /etc/profile
    执行下面两个命令,如果不报错说明node的环境变量添加成功了:

    node -v
    npm -v
    效果如下:
    在这里插入图片描述
    步骤2:安装nginx:

    下载地址:使用命令执行 sudo wget http://nginx.org/download/nginx-1.13.3.tar.gz
    新建目录: sudo mkdir /usr/local/nginx
    进入到目录下,然后解压:
    cd /usr/local/nginx
    sudo tar -zxvf nginx-1.13.3.tar.gz

    进入到nginx-1.13.3目录,进行安装:

    ./configure --prefix=/usr/local/nginx
    ## 安装到/usr/local/nginx的nginx目录下
    make
    make install
    

    然后将vue打包的dist文件放到nginx.conf的配置文件中如下:
    在这里插入图片描述
    配置好之后就启动nginx:
    #cd /usr/local/nginx/sbin/ 然后./nginx 启动,为了测试是否启动:ps -ef|grep nginx查看进程
    检查conf语法是否正确;/usr/local/nginx/sbin/nginx -t
    然后直接访问地址: xxxxxx:8415 出现如下图则表示成功:
    在这里插入图片描述
    最后如果让外部能够访问改地址,需要把服务器自带的防火墙关闭

    centOS6及以前版本使用命令: systemctl stop iptables.service

    centOS7关闭防火墙命令: systemctl stop firewalld.service,然后就可以访问了,如下图:
    在这里插入图片描述

    展开全文
  • Linux服务器如何部署前端vue项目

    万次阅读 2020-11-10 23:10:11
    1.使用宝塔面板在服务器安装nginx 2.前端vue项目进行打包会得到dist 3.将dist文件中的内容全部复制到nginx中的html文件夹中即可! 4.然后访问域名或者服务器ip即可。

    1.使用宝塔面板在服务器上安装nginx

    2.前端vue项目进行打包会得到dist

    3.将dist文件中的内容全部复制到nginx中的html文件夹中即可!

    4.然后访问域名或者服务器ip即可。

    展开全文
  • 本文主要讲不使用 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. 顺便希望各位关注一下我的公众号,新的文章第一时间发到公众号,公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点,并且还有非常吸引人的个人自费抽奖活动哦~

    展开全文
  • vue前端项目打包使用vscode开发项目在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号,因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。如图所示:prod.env.js在config目录...

    一. vue前端项目打包

    使用vscode开发项目

    在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号,因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。

    如图所示:

    prod.env.js

    在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件

    build: {

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: './',

    }

    终端输入

    npm run build

    运行此命令行后会自动生成一个dist文件夹,这就是打包后生成的项目文件。之后将此文件夹放到服务器上,路径要与nginx配置路径一致。

    dist

    二. Linux服务器上安装nginx并且进行相关配置

    1. 安装必要软件

    1.1 使用xshell连接终端

    xshell

    1.2 使用xftp传输文件

    xftp

    2. 安装nginx

    2.1 下载nginx

    (两个方法)

    方法一: 下载nginx,然后使用xftp传输到云服务器上

    方法二: 命令行下载

    http://nginx.org/download/

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

    2.2 解压nginx安装包

    进入nginx目录

    tar -zvxf nginx-1.13.6.tar.gz

    cd nginx-1.13.6

    2.4 make编译安装nginx

    ./configure --with-http_ssl_module --with-http_gzip_static_module

    make

    make install

    2.5 启动程序

    cd /usr/local/nginx/sbin/

    ./nginx

    2.6 查看运行状态

    ps aux | grep nginx

    nginx 前端项目代理地址配置

    (Vue项目设置了本地代理,部署到Nginx上需要使用反向代理解决生产环境跨域问题)

    vue项目代理设置

    本地代理地址配置文件 config/index.js

    proxyTable: {

    '/api': {

    target: 'https://api.weixin.qq.com', //请求地址

    changeOrigin: true, //true表示跨域

    secure: false,

    ws: true,

    logLevel: 'debug',

    pathRewrite: {

    '^/api': ''

    }

    },

    '/token': {

    target: 'http://139.9.xxx.77:8089', //请求地址

    changeOrigin: true, //true表示跨域

    secure: false,

    ws: true,

    logLevel: 'debug',

    pathRewrite: {

    '^/token': ''

    }

    }

    },

    nginx代理设置

    在/usr/local/nginx/conf目录下配置nginx.conf文件修改内容

    (1) 修改root,(root为项目打包后文件的存放路径。)

    location / {

    root /home/www/dist;

    index index.html index.htm;

    }

    (2)设置nginx反向代理(解决生产环境跨域问题),代理样式如下

    查看

    location /api/ {

    proxy_pass https://api.weixin.qq.com/;

    add_header Content-Type "text/plain;charset=utf-8";

    add_header 'Access-Control-Allow-Origin' '*';

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST';

    }

    location /token/ {

    proxy_pass http://139.9.xxx.77:8089/;

    add_header Content-Type "text/plain;charset=utf-8";

    add_header 'Access-Control-Allow-Origin' '*';

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST';

    }

    完整配置文件server部分如下

    server {

    listen 8080;

    server_name localhost;

    #charset koi8-r;

    #access_log logs/host.access.log main;

    location / {

    root /home/www/dist;

    index index.html index.htm;

    }

    #error_page 404 /404.html;

    # redirect server error pages to the static page /50x.html

    #

    error_page 500 502 503 504 /50x.html;

    location = /50x.html {

    root html;

    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80

    #

    #location ~ \.php$ {

    # proxy_pass http://127.0.0.1;

    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

    #

    #location ~ \.php$ {

    # root html;

    # fastcgi_pass 127.0.0.1:9000;

    # fastcgi_index index.php;

    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

    # include fastcgi_params;

    #}

    # deny access to .htaccess files, if Apache's document root

    # concurs with nginx's one

    #

    #location ~ /\.ht {

    # deny all;

    #}

    location /api/ {

    proxy_pass https://api.weixin.qq.com/;

    add_header Content-Type "text/plain;charset=utf-8";

    add_header 'Access-Control-Allow-Origin' '*';

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST';

    }

    location /token/ {

    proxy_pass http://139.9.xxx.77:8089/;

    add_header Content-Type "text/plain;charset=utf-8";

    add_header 'Access-Control-Allow-Origin' '*';

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST';

    }

    }

    conf配置文件的启动

    在实际当中服务器中可能有多个vue前端项目,此时我们只要单独修该conf文件即可,一个前端项目对应的一个conf文件。

    conf启动命令符如下:

    启动项目指定配置文件

    cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf

    查看启动进程:

    ps -ef|grep nginx_hwfm

    杀掉进程:

    kill -9 进程号

    查看nginx

    nginx其它常用命令

    (1)启动nginx:

    cd /usr/local/nginx/sbin/

    ./nginx

    (2)查看运行状态

    ps aux | grep nginx

    (3)停止nginx

    ./nginx –s stop

    (4)检查配置文件是否正确

    ./nginx –t

    (5)查看nginx版本

    ./nginx -v

    (6)配置文件位置

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

    (7)拓展(window下nginx启动命令)

    cd MyDownloads\nginx-1.15.3

    start nginx

    nginx -s stop

    nginx -s reload

    展开全文
  • 服务器的jdk缺少字体库。 在C:\Windows\Fonts寻找所用的字体文件,加入服务器jdk中的/jre/lib/fonts中
  • 首先,说明一点,这是亲测可用、简单易行的,我整个项目是前后端分离的,后端已经部署成功,现在是在Ubuntu18.04使用nginx服务器部署基于react脚手架前端项目的教程,如果是部署vue,相信也能触类旁通。...
  • Jenkins部署前端项目

    千次阅读 2019-10-21 16:16:37
    1.Jenkins部署前端项目 在使用Jenkins部署前端项目时需要搭建好 JenKins 的自动化部署环境。 1)Linux服务器安装好了JDK软件,并配好了环境变量 2)Linux服务器安装好 Jenkins 软件,并安装了 JenKins 推荐安装...
  • vue前端项目打包 使用vscode开发项目 在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号,因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。 如图所示: 在config目录...
  • 一、vue前端打包成dist 1、使用webstorm一键打包 2、打包有可能失败的原因:添加了模拟数据 if (process.env.NODE_ENV === 'production') { const { mockXHR } = require('../mock') mockXHR() } 3、所放的...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 332
精华内容 132
关键字:

linux上部署前端项目

linux 订阅