背景:我们自己项目开发完成以后,老大让我把4-5个项目分别部署在不同的服务器上windows/linux都有部署。从一开始的啥都不会,到现在自己完全可以看明白自己配置nginx使用,前前后后一个多月经历了太多辛酸。废话不多说了,记录下吧。

一、负责部署的项目:Vue、H5

Vue项目需要的是最后build完之后的dist文件夹,其他源码不需要。H5整个项目源码都需要放在服务器上。

二、部署到windows服务器

部署前的准备:

1、老大会给你个服务器包含IP地址和登录密码,进行登录。运行mstsc命令

记录前端项目通过nginx部署windows服务器记录前端项目通过nginx部署windows服务器

 2、登录以后会进入windows页面,然后将需要部署的项目拷贝到服务器上。(不能拷贝的用邮箱发)

3、一般项目都放在C盘根目录下,nginx会放在C:/Program Files文件夹下面

三、文件放置好,开始进行nginx配置

nginx下载去官方下载就ok,记录前端项目通过nginx部署windows服务器记录前端项目通过nginx部署windows服务器

1、首次下载好nginx以后点击nginx.exe会在屏幕前一闪而过一个小黑框,这就表示nginx已经运行了

(查看任务管理器,进程里面会有两个nginx的运行文件,这就表明你已经让nginx运行起来了)

记录前端项目通过nginx部署windows服务器

2、然后打开浏览器,搜索框输入localhost回车键,会发现进入了一个页面。这个页面就是nginx默认配置好跳转的路径,这个配置随后需要改。

记录前端项目通过nginx部署windows服务器

3、这个页面就类似于刚安装了一个vue-cli的项目,然后第一次启动项目以后输入localhost会进入Vue的HelloWorld界面一个道理。HellowWorld里面的路由界面需要删除修改成自己需要的,那么nginx和他一样也需要删除原有的默认配置文件,然后修改成自己需要的。

4、认识下nginx文件夹里面的各个文件

记录前端项目通过nginx部署windows服务器记录前端项目通过nginx部署windows服务器

5、进入nginx.conf文件以后别慌!我刚开始也什么都不认识,多看看就认识了。

首先nginx配置分为三大部分内容:全局块events块和http块

记录前端项目通过nginx部署windows服务器

记录前端项目通过nginx部署windows服务器

6、修改完nginx配置以后就可以启动nginx了

点击之前ngxin.exe文件就好了。(如果之前nginx已经启动了,需要手动关闭Nginx,然后重新启动nginx。我一般关闭时在任务管理器里面结束进程就好了)

启动nginx有对应的命令:cmd窗口cd到nginx.exe所在的目录,输入命令:nginx -t 如果修改的内容没有语法错误就会返回一串内容里面有success,就表示nginx修改成功,接下来执行nginx -s reload,启动nginx。启动nginx以后,在浏览器里面输入server_name后面的ip地址,或者对应的域名就能打开项目了。

相关文章:

  • 2021-11-10
  • 2022-12-23
  • 2021-12-18
  • 2021-10-22
  • 2021-11-26
  • 2020-03-11
  • 2021-12-22
猜你喜欢
  • 2021-08-06
  • 2021-05-27
  • 2021-08-27
  • 2022-01-14
  • 2021-11-17
  • 2023-03-04
相关资源
相似解决方案