当前位置:   article > 正文

项目上线流程_千锋实战php阿里云项目上线

千锋实战php阿里云项目上线

1.代码打包

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

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

npm run build

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

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

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

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

2.上线部署

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

后续操作会用到不少相对路径,为了保证大家的操作正确, 此处统一先切换当前工作路径:
  1. cd /usr/local/src
  2. # 该地址是已经存在的,不需要自己创建

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

下载地址:https://www.mongodb.com/try/download/community

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

  1. wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz
  2. # 或
  3. curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz

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

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

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

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

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

  1. mkdir -p /usr/local/mongodb/data
  2. mkdir /usr/local/mongodb/log
  3. cp -r /usr/local/src/mongodb-linux-x86_64-rhel70-4.4.1/bin /usr/local/mongodb/
  4. # 建立mongodb需要使用的日志文件
  5. touch /usr/local/mongodb/log/logfile

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

ls /usr/local/mongodb/

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

需要注意,此种方式的mongoDB为绿色软件,默认不会开机自动启动,不再需要使用的时候直接删除 /usr/local/mongodb目录即可卸载软件。
  1. /usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/log/logfile --bind_ip=127.0.0.1 --fork
  2. # --dbpath:指定数据库文件夹位置
  3. # --logpath:指定日志文件位置
  4. # --bind_ip:绑定监听的网卡ip地址
  5. # --fork:以后台服务的形式运行
注意: logpath配置项的值一定是一个文件(可以不存在),不能是文件夹。

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

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

②安装nodejs

文档地址:https://github.com/nodesource/distributions/blob/master/README.md

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

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

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

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

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

node -v

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

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

到此,nodejs环境安装完毕!

③安装nginx

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

软件官网:https://nginx.org/

傻瓜式包管理工具安装方式说明参考地址:https://nginx.org/en/linux_packages.html#RHEL-CentOS

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

  1. [nginx-stable]
  2. name=nginx stable repo
  3. baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
  4. gpgcheck=1
  5. enabled=1
  6. gpgkey=https://nginx.org/keys/nginx_signing.key
  7. module_hotfixes=true
  8. [nginx-mainline]
  9. name=nginx mainline repo
  10. baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
  11. gpgcheck=1
  12. enabled=0
  13. gpgkey=https://nginx.org/keys/nginx_signing.key
  14. module_hotfixes=true
对于文件的创建和修改,可以考虑咋windows上进行,写完毕之后再通过文件传输工具,将文件上传到指定的位置即可。

随后运行nginx的安装命令:

sudo yum install -y nginx

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

  1. # 启动nginx
  2. systemctl start nginx
  3. # 停止nginx
  4. systemctl stop nginx
  5. # 重启nginx
  6. systemctl restart nginx
  7. # 设置nginx开机自启动
  8. systemctl enable nginx
  9. # 设置nginx开机不自启动
  10. 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命令进行测试:

  1. # 以刚才设置的域名为例(请替换成自己的域名)
  2. 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工具:

  1. # 先进入项目目录
  2. pm2 start http.js
  3. ## 重启
  4. pm2 restart http.js
  5. ## 停止
  6. 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

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

随后重启nginx:

systemctl restart nginx

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/307290?site
推荐阅读
相关标签
  

闽ICP备14008679号