前端仔，快把dist部署到Nginx上

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

• 在线音乐戳我呀！
• 音乐博客源码上线啦！
• 前两个月有一段时间没有写文章了，不是我懒，而是最近项目加班太严重了，连续加班一个星期，项目经理自己下班早，看不到凌晨三点努力的我们，就说版本不可延期，上线后请一天假休息还撕破嘴皮。
• 做一件事，最心酸的莫过于你已经很努力干活了，甚至没有一点怨言，只想听到别人对你的赞扬，心里可能就足矣，最怕人家根本不领情，反倒过来说你这不好，那不好。
• 当然晚上还是会花点时间学习，毕竟时间就像牛奶一样，挤一点总会有的。
• 之前在顺德工作服务器是Win，导致我的服务器一直都是Win，换工作到广州，服务器基本都是Linx，发现Linx各种好，对于我现在，空间是一道硬伤，于是我决定迁移成Linx系统。
• 下面一步一步带你走进全过程 | Nginx篇。

不知名的岛上。

需求

目前音乐博客部署在Win7上，应用主要有：

• 后端有
  • Java作为第三方应用，需要安装Java镜像（👌🏻）
  • Node作为主后台，需要安装Node镜像
• 数据库有
  • Java连接Oracle，需要安装Oracle镜像
  • Node连接Mysql，需要安装Mysql镜像（👌🏻）
• 前端项目部署在Nginx，需要安装Nginx镜像（✔️）
• 歌词服务也是部署在Node上
• Node连接的是Mysql，需要安装Mysql镜像
• Java连接的是Oracle，需要安装Oracle镜像
• 音乐文件存放在Minio上

需要将以上应用迁移到Linx上，干！

很多公司不让碰服务器，现在可以看看关注我，记录从Linux上无到有，全过程。
这一篇是主要还是写给还在用win服务器的、准备迁移Linux的朋友，可以练习迁移服务器到Linux，Linux有很多好处，最可见的就是空间、速度快…
迁移过程中，势必会有很多坑等着你来解决，上方的需求都会写上，本篇主要讲解Linux部署Nginx，其他应用后续持续更新，敬请期待！

Linux安装Nginx

给大家说一个笑话：一开始我将之前在win版本的nginx复制放到linux上，准备来运行。

接着不行之后，又想把公司Linux上的nginx复制过去，其实也是不行的，还是得通过yum安装一下。

一、 安装依赖包

//一键安装上面四个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

二、 下载并解压安装包

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx

//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz

三、 安装nginx

//进入nginx目录
cd /usr/local/nginx

//进入目录
cd nginx-1.13.7

//执行命令
./configure

//执行make命令
make

//执行make install命令
make install

四、 配置nginx.conf

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

将端口号改成8089，因为可能apeache占用80端口，apeache端口尽量不要修改，我们选择修改nginx端口。

localhost修改为你服务器ip地址。

五、 启动nginx

/usr/local/nginx/sbin/nginx -s reload

如果出现报错：nginx: [error] open() ＂/usr/local/nginx/logs/nginx.pid＂ failed

则运行： 

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

再次启动即可！

六、 查看nginx进程是否启动

ps -ef | grep nginx

七、 关闭虚拟机的防火墙

若想使用外部主机连接上虚拟机访问端口，需要关闭虚拟机的防火墙：

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

centOS7关闭防火墙命令： systemctl stop firewalld.service

随后访问该ip即可看到nginx界面。

八、 Nginx常用的命令

• 进入安装目录中

  • cd /usr/local/nginx/sbin

• 启动

  • ./nginx

• 停止

  • ./nginx -s stop

• 重启

  • ./nginx -s reload

• 检查是否有语法问题

  • ./nginx -t

重启nginx前，建议大家都使用./nginx -t去检查语法是否有问题，若显示

nginx.conf syntax is ok nginx.conf test is successful

说明配置文件正确！

九、把dist部署到Nginx上

我们nginx安装好了，现在就进入主题：前端仔，快把dist部署到Nginx上。

在/usr/local/nginx/conf中的server对象中设置alias配置dist的目录路径即可。

就比如我dist文件夹放在/home/tsVue/vue/dist/下;

修改完后，记得重启一下nginx。

在八、 Nginx常用的命令中讲到重启的命令。

这样，我们在访问服务器ip的时候就可以看到我们通过nginx转发的80端口下，显示dist文件夹中的index.html页面。

最后

我们完成了需求之一：前端项目部署在Nginx，需要安装Nginx镜像。

我们总是喜欢以项目来驱动学习，不是吗？

我也是，通过个人项目 – 在线音乐 来驱动我学习Linux系统、Docker、Java、Nginx等等前端可能接触不到的知识，我想这可能就是管理层的“广度”。

下篇讲解Node，回见啦~

相关文献

LINUX安装nginx详细步骤

以往推荐

Typora拖拉图片生成在线图片 | Gitee图床

多图详解，一次性啃懂原型链（上万字）

Vue-Cli3搭建组件库

Vue实现动态路由（和面试官吹项目亮点）

项目中你不知道的Axios骚操作（手写核心原理、兼容性）

VuePress搭建项目组件文档

vue-typescript-admin-template后台管理系统

原文链接

juejin.cn/post/702281…