龙空技术网

项目上线流程

千锋IT小助手 152

前言:

如今你们对“nginx mainline”大体比较着重,看官们都需要了解一些“nginx mainline”的相关文章。那么小编在网摘上汇集了一些关于“nginx mainline””的相关知识,希望咱们能喜欢,各位老铁们一起来了解一下吧!

1.代码打包

当我们完成一个项目开发的时候,下一步肯定会要把这个项目放到互联网上进行发布,此时我们就得先通过打包命令npm run build来对项目进行打包。

在命令行工具中运行(需进入项目路径):

npm run build

稍等片刻后如果提示如下信息则表示打包成功:

打包成功后会在当前项目目录下多出一个dist目录:

在打包之前一定要将之前开发过程中使用反向代理的操作给去除掉,一上线代理就失效了。同时需要注意解决数据接口的跨域请求问题。

注意:打包之后得到的这些文件都是经过压缩处理的,如果需要更改原先JavaScript、css等文件的内容,请在开发环境中去修改,然后重新打包生成。

2.上线部署

项目上线部署需要有服务器,此处我们以已经购买好的阿里云ECS(CentOS 7.9版本操作系统)为例。

后续操作会用到不少相对路径,为了保证大家的操作正确,此处统一先切换当前工作路径:

cd /usr/local/src# 该地址是已经存在的,不需要自己创建

①如果项目中使用到了mongoDB,则需要先安装mongoDB

下载地址:

可以选择Copy Link随后去服务器中对应的目录执行命令下载:

wget  或curl -O 

也可以直接用今日docs目录下已经下载好的压缩包,使用FileZilla进行上传到服务器的/usr/local/src目录。

.tgz格式文件是压缩包文件格式的一种,需要使用其中的内容得先解压,解压命令为:

tar -zxvf mongodb-linux-x86_64-rhel70-4.4.1.tgz# 或tar -xvf mongodb-linux-x86_64-rhel70-4.4.1.tgz# -z:表示指定解压缩所使用的方式,表示使用gz格式进行解压# 如果不指定使用什么方式解压,则tar会自己判断

解压后会得到mongoDB的解压目录:

Linux系统下对于第三方软件的安装一般存放在/usr/local下,此处建议将解压后得到的目录中的bin目录进行转移,转移的同时需要创建mongoDB的数据文件夹和日志文件夹,命令如下:

mkdir -p /usr/local/mongodb/datamkdir /usr/local/mongodb/logcp -r /usr/local/src/mongodb-linux-x86_64-rhel70-4.4.1/bin /usr/local/mongodb/# 建立mongodb需要使用的日志文件touch /usr/local/mongodb/log/logfile

上述指令执行完毕后可以通过ls进行列出检查,查看是否有以下文档结构:

ls /usr/local/mongodb/

随后,就可以通过以下命令去启动mongoDB了:

需要注意,此种方式的mongoDB为绿色软件,默认不会开机自动启动,不再需要使用的时候直接删除/usr/local/mongodb目录即可卸载软件。

/usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/log/logfile --bind_ip=127.0.0.1 --fork# --dbpath:指定数据库文件夹位置# --logpath:指定日志文件位置# --bind_ip:绑定监听的网卡ip地址# --fork:以后台服务的形式运行

注意:logpath配置项的值一定是一个文件(可以不存在),不能是文件夹。

至此,mongoDB已经可以使用了,可以通过运行mongoDB连接工具进行测试,如果有以下输出则一切正常:

此时可以在其中创建好maizuo数据库,以及往库中写入users表中的数据了。

②安装nodejs

文档地址:

复制好对应的指令后在终端中去执行(这个命令会在我们服务器上安装一个nodejs的镜像源以告诉包管理工具去哪里下载nodejs):

curl -sL  | bash -

随后运行以下命令安装nodejs:

sudo yum install -y nodejs

使用sudo开头的命令可能会提示让输入密码,如果有则输入当前用户的密码即可。

安装好nodejs后,可以通过命令测试是否安装成功nodejs:

node -v

最后,可以继续安装一些可选的全局包以方便后面使用:

# 安装nrm,并切换npm镜像源为淘宝npm i -g nrmnrm use taobao# 安装nodemonnpm i -g nodemon# 安装pm2(让node在后端运行的工具,这样可以在配置完毕之后关闭终端窗口)npm i -g pm2

到此,nodejs环境安装完毕!

③安装nginx

Nginx是一款轻量级服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。

软件官网:

傻瓜式包管理工具安装方式说明参考地址:

按照上述提示,在服务器上指定的位置/etc/yum.repos.d/nginx.repo新建一个文件,文件内容如下:

[nginx-stable]name=nginx stable repobaseurl=[nginx-mainline]name=nginx mainline repobaseurl=

对于文件的创建和修改,可以考虑咋windows上进行,写完毕之后再通过文件传输工具,将文件上传到指定的位置即可。

随后运行nginx的安装命令:

sudo yum install -y nginx

在nginx完成安装后,可以通过以下几个命令来管理nginx服务:

# 启动nginxsystemctl start nginx# 停止nginxsystemctl stop nginx# 重启nginxsystemctl restart nginx# 设置nginx开机自启动systemctl enable nginx# 设置nginx开机不自启动systemctl disable nginx

接下来启动nginx:

systemctl start nginx

请注意,后续每次修改了nginx的配置文件都需要对nginx服务进行重启,否则新的配置不会生效。

nginx相关的目录位置:

配置文件主配置文件nginx.conf:/etc/nginx/nginx.conf从配置文件‘*.conf’:可以是任意位置,以主配置文件声明为准,比较常用针对站点的从配置文件在/etc/nginx/conf.d/目录下默认站点目录/usr/share/nginx/html(等于PHPstudy中的WWW目录,回头代码得放到这个里面去)

④域名解析(如果有域名的话)

如果是大陆服务器使用,则域名一定要通过了ICP备案才可以

以阿里云为例,先进入域名控制台,在需要使用的域名后面点击解析按钮进入解析页面,随后点击添加记录按钮并按照自身需求填写解析信息:

设置完成后一般1分钟内即可生效,可以在本机windows上通过ping命令进行测试:

# 以刚才设置的域名为例(请替换成自己的域名)ping sh2008.lynnn.cn

⑤项目代码部署

a. 将打包好的vue代码上传到Nginx默认的站点下,目录地址为/usr/share/nginx/html

b. 启动node服务端为项目提供数据访问服务

如果出现无法访问的情况,请注意防火墙与云安全组的设置。

上传node服务端的代码到远程服务器,位置可以随意(因为代码是node运行的,不是nginx):

接下来进入node代码的目录/usr/local/src/http,运行安装所需模块的指令:

npm install

此时即便运行了node服务器,也会出现无法访问的情况,需进入阿里云的控制台添加允许3000端口通过。

最后,让node在后台执行http.js文件(根据需要换成自己的文件名),此处需要用到前面安装的pm2工具:

# 先进入项目目录pm2 start http.js## 重启pm2 restart http.js## 停止pm2 stop http.js

如果成功,则会看到如下效果:

c. 解决nginx下,路由模式history失效的问题

方案1:不使用history模式的路由

不使用istory模式,则得用hash模式,该模式下地址栏会有#

方案2:配置nginx,让nginx支持history模式的路由

try_files $uri $uri/ /index.html;

将上述的代码放到/etc/nginx/conf.d/default.conf

location / {    root   /usr/share/nginx/html;    index  index.html index.htm;    # 以下是新增的一行    try_files $uri $uri/ /index.html;}

随后重启nginx:

systemctl restart nginx

重启之后新的配置将会生效,项目到这里也就可以通过域名或者ip地址进行访问了。

标签: #nginx mainline