将项目部署到nginx服务器上_项目放到nginx-程序员宅基地

技术标签： nginx

一. 介绍

服务器：本质是一台电脑，没有显示器，就是主机，24小时开机，为用户提供远程服务。

市面上的服务器：阿里云/华为云/腾讯云（配置）
主机->操作系统->window（.net）/Linux->Tomcat/nginx(软件/反向代理)

将自己的电脑作为服务器->window->nginx
远程部署（mac）

二. window上使用nginx

1. window下载nginx

（1）官方网站：https://nginx.org/en/download.html
（2）其中包含很多的nginx版本，大致可分为三类：
- Mainline version: Mainline 是nginx目前主力在做的版本，可以说是开发板
- State version: 最新稳定版，生产环境上建议使用的版本
- Legacy versions: 遗留的老版本的稳定版
（3）不用多说，我们选择Stable version的最新稳定的版本，选择windows的版本
在这里插入图片描述
（4）下载，并且解压到某个文件夹。
- 注意：解压到的文件夹尽量不要解压到含有中文的文件夹，否则不能正常启动。
- 双击启动接口，也就是nginx.exe
- 在浏览器中输入localhost，看到下面的页面说明安装成功。
在这里插入图片描述

2. 部署项目到nginx

（1）第一种方法：
将使用npm run build打包好的项目，也就是dist文件夹里面的东西复制到nginx解压后的文件（也就是启动nginx.exe的文件夹）下的html的文件下，然后刷新一下页面即可。
在这里插入图片描述

注意：复制到该文件夹下时必须先将里面的文件先删除掉。在刷新页面时，要去掉路由的路径再刷新，也就是路径必须是localhost，因为localhost才是你的服务器路径，后面加的类似于/home是你的页面路由。

（2）第二种方式就是将dist整个文件夹复制到nginx的解压文件夹下
在这里插入图片描述
该方法要到conf文件夹下nginx.conf文件里面修改相关配置

该文件里面的location / {} 里面的root就是解压nginx的目录，意思是说，默认打开的是root（也就是根目录）下的HTML里面的index.html/index.htm的网页，也就是第一种方式打开部署到nginx项目的途径。
在这里插入图片描述
那么采用第二种方式部署的话，就要修改这里面的路径配置（将html修改为dist），如下图：

修改完后要重启nginx，要重启才能生效。我们可以通过下面几种方式来重启（前提是在cmd窗口中进到nginx的解压目录里面）：
（a）cd到解压目录后：输入nginx.exe -s stop。stop是快速停止nginx，并不保存相关信息；
（b）第二种输入：nginx.exe -s quit。quit是完整有序的停止nginx，并保存相关信息。
（c）输入：nginx.exe -s reload。当配置信息修改，需要重新载入这些配置时使用此命令。

注意：

前面两种都要用start nginx重新启动。第三种方法是重启。但是有些时候，使用上面三种的方法都没有效果，也就是重启无效。那么我们通过taskkill /IM nginx.exe /F该命令就可解决重启无效的情况，执行该命令后，仍需start nginx启动。这时，在浏览器输入localhost便可成功打开采用第二种方法部署到nginx的项目。
为什么采用taskkill /IM nginx.exe /F命令可以呢？这是因为Nginx是多进程模型，有一个主进程和多个子进程，主进程只负责管理子进程，基本的网络事件由各个子进程处理。所以有时候当我们通过nginx -s reload这种方式去重启Nginx的话，发现是无效的，这就是因为我们杀死了一个子进程，然后主进程会开启另一个子进程，所以我们需要先关闭掉Nginx的所有进程（包括主进程和子进程）。该命令中/IM是用来kill掉指定名字的进程的，-F是用来强制kill的。

访问效果图：

在这里插入图片描述

本文链接：https://blog.csdn.net/victory_CEO/article/details/114040073

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

MVC模式-程序员宅基地

文章浏览阅读6k次，点赞22次，收藏101次。一、MVC模式简介MVC是一种架构型模式，它本身并不引入新的功能，只是用来指导我们改善应用程序的架构，使得应用的模型和视图相分离，从而得到更好的开发和维护效率。在MVC模式中，应用程序被划分成了模型（Model）、视图（View）和控制器（Controller）三个部分。其中，模型部分包含了应用程序的业务逻辑和业务数据；视图部分封装了应用程序的输出形式，也就是通常所说的页_mvc模式

macOS下QT设置应用程序图标、程序坞图标_qt macos 软件图标-程序员宅基地

文章浏览阅读2k次，点赞2次，收藏5次。1. 设置应用程序图标（finder中展示的图标）在Qt助手（QT Assistant）中，输入“setting”，可以看到下面的列表中有Setting the Application Icon，双击它就可以看到右侧窗口中的帮助文档，帮助文档里介绍了如何设置应用程序图标。文档内容很全面，包括如何设置windows、OS X和linux的程序图标。这里我们介绍如何设置macOS下应用程序的图标。如Qt助手中介绍的方法，QWindows::setWindowIcon()只能设置在程序坞中展示的图标，_qt macos 软件图标

手把手教你系列之微信公众号 java后端获取code（重定向解决）_微信授权后端重定向获取code可行么-程序员宅基地

文章浏览阅读8.4k次，点赞7次，收藏20次。微信开发文档上，获取code是在前端页面获取，但是现在也不知道为啥非得在后端获取，获取就获取吧，安排一下。获取code的目的，其实就是为了获取openid和token，获取openid和token的目的，其实是为了获取unionid和用户信息。先写个工具类，主要是两个方法，需要的，你们直接复制粘贴就好public class WxGzhUtils {/*** 获取openid access_token* @param appid* @param secret* @param code* _微信授权后端重定向获取code可行么

switch case 语句-程序员宅基地

文章浏览阅读131次。简单介绍了switch case，快来看看吧~

Unity Shader中内置的坐标空间与转换矩阵函数_unity空间转换函数-程序员宅基地

文章浏览阅读2.6k次。模型空间（model space）也称为对象空间（object space）或局部空间（local space）是指以模型原点为原点的坐标系。世界空间（world space）也称全局空间（global space）是以世界原点为原点的坐标系，世界坐标也就是Unity3D里的绝对坐标。观察空间（view space）也称摄像机空间（camera space）是以摄像机为原点的坐标系。（这是各坐标空..._unity空间转换函数

火狐Httprequester使用_httprequester 火狐-程序员宅基地

文章浏览阅读5.7k次。模拟浏览器请求的插件，本人使用的是火狐的HttpRequester插件，安装方法是在扩展程序中搜索名称添加，重启浏览器即可本文是记录Post和Get请求的基本方法1、Post请求带参数如上图,若选择请求内容为json格式，则必须使用json（键值对）格式的内容，否则请求报错，请求内容格式如下：{"kkk":{"name":"ddd","age":111},"ssss":{"name":_httprequester 火狐

随便推点

站长常用的200个js代码-程序员宅基地

文章浏览阅读134次。站长常用的200个js代码1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onb..._站长之家h5端站点统计js代码

springboot基于微信小程序的社区外卖系统--70047(免费领源码、附论文）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、大数据、全套文案-程序员宅基地

文章浏览阅读131次。社区外卖系统小程序主要功能模块包括推荐菜品、今日特惠、外卖咨询、配送信息、用户反馈，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的主要存储单元，采用springboot框架、Java技术、Ajax技术进行业务系统的编码及其开发，实现了本系统的全部功能。

Java“牵手”易贝商品列表数据，关键词搜索易贝商品数据接口，易贝API申请指南-程序员宅基地

文章浏览阅读248次。ebayAPI接口入点（按图搜索，商品详情，关键词搜索，商品评论，订单类接口），希望以上的示例，可以帮到有需要的朋友。以上示例中，通过发送 HTTP /POST/GET 请求获取ebay商品列表和详情的 API 数据，然后将返回的 JSON 数据解析为对应的数据结构，以便进一步处理和使用。要获取ebay商品列表和商品详情页面数据，您可以通过开放平台的接口或者直接访问ebay商城的网页来获取商品详情信息。调用开放平台提供的接口，传入商品 ID 作为参数，获取对应商品的列表和详情页面数据。