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

21,803 阅读5分钟

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

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

前言

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

不知名的岛上。

48.jpg

需求

目前音乐博客部署在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地址。

20.png

五、 启动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

21.png

七、 关闭虚拟机的防火墙

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

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

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

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

22.png

八、 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/下;

60.png

修改完后,记得重启一下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…