linux服务器安装nginx以及vue项目打包部署(Mac)

这里我这边主要介绍下, vue打包后部署到nginx服务器运行

现在前后台分离模式开发越来越受到欢迎, 前端做前端, 后端做后端, 互相不干预, 两者通过接口进行通信传输。不过这样处理的话, 就需要前端人员掌握一些服务器相关知识点, 我再这里简单介绍下。

为什么选Nginx做上传服务器呢? Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器等, 在稳定性、功能集、示例配置文件和低系统资源的消耗方面都非常好, 当然了负载均衡是个不错的选择。

多的就不夸了, 直接上实战

首先呢要准备好一台云服务器, 且必须有root权限
我这边呢是自己买的一台服务器, 腾讯云 1核2G, 带宽1M, 50G云硬盘, Linux/Windows镜像
我个人比较推荐阿里云服务器, 为什么买的腾讯云呢? ...便宜, 新用户以上配置99一年

进入服务器, 我这边选用工具是FinalShell, 既可以用命令也可以在可视化界面操作处理
FinalShell下载/文档地址

FinalShell页面

一. 先安装PCRE pcre-devel 和Zlib

配置nginx的时候会用到, PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。
命令

yum install -y pcre pcre-devel

安装PCRE

我这边已经安装过提示这样

因为nginx 使用 zlib 对 http 包的内容进行 gzip ，所以我们顺便安装 zlib 库。
命令

yum install -y zlib zlib-devel

这两个好了我们就可以继续安装nginx

如果安装的时候有问题, 提示需要需要安装GCC和OpenSSL(很幸运, 我没遇到)可以一并安装
命令

yum install -y zlib zlib-devel

二. 先安装nginx

我们可以去官方网站上下载, 解压安装, 下载后是tar.gz包
Nginx下载地址

Nginx官网下载页面

当然我们可以用命令下载
命令:

wget -c https://nginx.org/download/nginx-1.14.0.tar.gz

这里我选用1.14.0版本
解压并进入nginx目录

tar -zxvf nginx-1.14.0.tar.gz
cd nginx-1.14.0

使用nginx的默认配置, 编译安装
命令

./configure
make
make install

安装完成之后快速查找nginx路径
命令

whereis nginx

查找nginx路径

sbin文件夹下面有一个nginx的可执行文件, 运行nginx即可
命令

./nginx

运行nginx

这时候浏览器, 输入服务器IP即可看到

欢迎页面

检查nginx是否启动

ps -ef|grep nginx

检查nginx

如果如上图有nginx的进程说明启动好了这个时候如果无法访问nginx页面可以先查看一下你服务器的安全组策略是否有启用80端口

验证你的nginx.conf文件是否是正确的, 文件位置 /usr/local/nginx/conf
命令

./nginx -t

检查conf是否正常

文件位置

pic99.png

三. Vue项目打包放到服务器

config → index.js 打包路径这里留意下

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

vue 打包命令, 打完之后会生成个dist包