nginx部署前端vue项目步骤

GISer_Jinger

于 2024-09-01 22:34:32 发布

阅读量632

点赞数 11

分类专栏： Vue 网络基础后端中间件文章标签：前端 nginx vue.js

本文链接：https://blog.csdn.net/m0_55049655/article/details/141791289

版权

Vue 同时被 3 个专栏收录

41 篇文章 2 订阅

订阅专栏

后端中间件

10 篇文章 0 订阅

订阅专栏

网络基础

3 篇文章 0 订阅

订阅专栏

Ngnix

Nginx是一款高性能的Web服务器和反向代理服务器，在计算机网络的OSI模型中，它主要工作在应用层（第七层），但请注意，OSI模型更多是用于教学和理论分析，实际网络协议栈（如TCP/IP模型）可能并不完全遵循OSI的分层结构。

Nginx的主要作用包括：

Web服务器：Nginx可以作为独立的Web服务器，直接处理HTTP请求并返回响应给客户端。它支持高并发连接，能够处理大量的并发请求，同时保持低内存消耗。
反向代理：Nginx可以将客户端的请求转发到后端的Web服务器上，实现反向代理功能。这有助于隐藏后端服务器的真实地址，提高系统的安全性和可靠性。同时，Nginx还可以根据负载均衡算法将请求分发到多个后端服务器上，实现负载均衡，提高系统的整体性能和可扩展性。
负载均衡：Nginx支持多种负载均衡算法，如轮询、权重分配、ip_hash等，可以根据实际需求将请求分发到多个后端服务器上，从而提高系统的负载能力和可靠性。
缓存加速：Nginx具有强大的缓存功能，可以缓存静态文件和动态内容，减少后端服务器的负载，提高系统的响应速度和性能。
安全功能：Nginx提供了一系列安全功能，包括访问控制、IP地址限制、SSL/TLS加密以及防火墙保护等，有助于保护服务器免受网络攻击。
其他功能：除了上述主要功能外，Nginx还可以作为邮件代理服务器，支持IMAP、POP3和SMTP协议，用于路由、过滤和传递电子邮件。此外，Nginx还可以作为应用服务器，托管PHP、Python和Node.js等动态应用程序。

综上所述，Nginx在计算机网络的应用层发挥着重要作用，通过其高性能、高并发、低内存消耗以及丰富的功能特性，为Web应用、流媒体服务、缓存加速等场景提供了强大的支持。

nginx部署前端vue项目步骤

Nginx部署前端Vue项目的详细步骤可以分为以下几个部分：

一、准备工作

确保Vue项目已开发完成：确保你的Vue项目能够在本地正常运行，并且已经完成了所有的前端开发工作。
安装Node.js和npm/yarn：虽然Nginx部署Vue项目不直接需要Node.js，但通常你需要使用Node.js和npm/yarn来打包Vue项目。
打包Vue项目：在项目根目录下运行npm run build或yarn build命令（取决于你使用的包管理工具），这将生成一个dist目录，里面包含了用于生产的静态文件。

二、安装Nginx

下载Nginx：访问Nginx官网下载适合你操作系统的安装包。
安装Nginx：按照官网提供的指南或你的操作系统的标准流程进行安装。对于Linux系统，通常可以使用包管理器（如apt-get、yum等）进行安装。

三、配置Nginx

找到Nginx配置文件：Nginx的配置文件通常位于/etc/nginx/nginx.conf，但也可能位于其他位置，具体取决于你的安装方式和操作系统。
编辑Nginx配置文件：使用文本编辑器（如nano、vim等）打开Nginx配置文件。

在配置文件中，你通常需要添加一个server块来指定Vue项目的配置。以下是一个基本的配置示例：

server {  
    listen 80;  # 监听80端口，你也可以改为其他端口  
    server_name your_domain.com;  # 你的域名，本地测试可以用localhost  
 
    location / {  
        root /path/to/your/vue/dist;  # Vue项目打包后dist目录的绝对路径  
        try_files $uri $uri/ /index.html;  # 尝试直接访问文件或文件夹，如果都没有找到，则返回index.html  
    }  
 
    error_page 500 502 503 504 /50x.html;  
    location = /50x.html {  
        root /usr/share/nginx/html;  
    }  
}

注意替换your_domain.com和/path/to/your/vue/dist为实际的值。
保存并关闭配置文件。

四、测试Nginx配置

检查Nginx配置文件的语法是否正确：运行nginx -t命令，如果返回syntax is ok和test is successful，则表示配置文件没有问题。
重启Nginx：为了让新的配置生效，你需要重启Nginx服务。可以使用sudo systemctl restart nginx（对于使用systemd的系统）或sudo service nginx restart（对于较旧的系统）命令来重启Nginx。

五、访问Vue项目

在浏览器中访问：打开浏览器，输入http://your_domain.com（或http://localhost:端口号，如果你修改了默认端口的话），你应该能看到你的Vue项目页面。

六、常见问题及解决方案

页面刷新404问题：这通常是因为Vue的路由模式设置为history模式，而Nginx没有正确配置以支持这种模式。你可以将Vue路由模式改为hash模式，或者在Nginx配置中添加适当的try_files指令来确保所有请求都返回index.html。
跨域请求问题：如果你的Vue项目需要向后端API发送请求，并且后端和前端部署在不同的域上，你需要在Nginx中配置CORS（跨源资源共享）或使用代理来转发请求。

Vue项目部署到服务器通过公网IP访问

Vue(7)：vue项目部署到服务器通过公网IP访问_怎么把自己的vue网站项目部署到公网-CSDN博客

将Vue项目打包并部署到公网供用户访问的过程，主要涉及到Vue项目的构建、服务器的配置、以及可能的域名绑定和反向代理设置。以下是一个详细的步骤说明：

一、Vue项目构建

项目打包：
- 在Vue项目的根目录下，运行npm run build或yarn build（取决于你使用的包管理工具）。
- 打包完成后，会在项目根目录下生成一个dist目录，里面包含了用于生产环境的静态文件。
修改配置（可选）：
- 如果你的项目在开发时使用了特殊的路径配置（如assetsPublicPath），可能需要将其从/改为./，以避免在部署后出现资源加载问题。
- 如果你的项目中有背景图片或其他静态资源需要特别处理，确保它们能被正确加载。

二、服务器配置

选择服务器：
- 选择一个适合你需求的云服务器，如阿里云、腾讯云、AWS等。
- 确保服务器已安装必要的操作系统和软件环境。
安装Web服务器：
- Nginx是一个轻量级且高效的Web服务器，非常适合用于部署Vue项目。
- 根据你的服务器操作系统，选择合适的安装方式进行Nginx的安装。
配置Nginx：
- 找到Nginx的配置文件（通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/目录下的某个文件）。
- 在配置文件中添加一个server块，用于指定Vue项目的配置。
- 设置listen指令来监听HTTP请求（默认为80端口，但你也可以选择其他端口）。
- 设置server_name为你的域名（如果有的话），或者使用服务器的公网IP地址。
- 在location /块中，设置root指令为你的Vue项目dist目录的绝对路径。
- 使用try_files指令来确保所有请求都能被正确路由到index.html，这对于单页面应用（SPA）来说非常重要。
重启Nginx：
- 修改完Nginx配置后，需要重启Nginx服务以使配置生效。
- 使用sudo systemctl restart nginx（对于使用systemd的系统）或sudo service nginx restart（对于较旧的系统）来重启Nginx。

三、域名绑定（可选）

购买域名：
- 如果你还没有域名，可以在域名注册商处购买一个。
域名解析：
- 在你的域名注册商提供的控制面板中，将域名解析到你的服务器公网IP地址。
配置Nginx以支持域名：
- 在Nginx配置文件中，将server_name设置为你的域名。

四、反向代理设置（可选）

如果你的Vue项目需要与后端API进行通信，并且出于安全考虑需要隐藏后端服务器的真实地址，你可以使用Nginx作为反向代理来转发请求。
在Nginx配置文件中，添加一个新的location块来匹配需要转发到后端服务器的请求路径，并使用proxy_pass指令来指定后端服务器的地址。

五、测试访问

在浏览器中输入你的域名（或服务器的公网IP地址加上端口号，如果你修改了Nginx的监听端口），检查Vue项目是否能够正常访问。
确保所有功能都按预期工作，包括路由跳转、API请求等。

通过以上步骤，你可以将Vue项目打包并部署到公网供用户访问。需要注意的是，具体的步骤可能会根据你的项目需求、服务器配置以及Nginx版本等因素而有所不同。

将项目部署到本地tomcat，怎样才能让外网IP访问

外网如何访问本地tomcat服务器地址 • Worktile社区

将Vue项目部署到本地Tomcat服务器，并希望外网IP能够访问，需要遵循一系列步骤来确保网络配置正确，同时保证Tomcat服务器能够正确处理外部请求。以下是详细的步骤说明：

一、Vue项目打包

项目构建：
- 在Vue项目的根目录下，执行npm run build命令进行项目构建。
- 构建完成后，会在项目根目录下生成一个dist目录，里面包含了用于生产环境的静态文件。
修改配置（如果需要）：
- 如果Vue项目中配置了特定的路径前缀或资源路径，确保这些配置在部署到Tomcat后仍然有效。
- 可能需要在vue.config.js中设置publicPath为'./'或其他适当的值，以确保资源文件能被正确加载。

二、Tomcat服务器配置

安装Tomcat：
- 确保Tomcat已经正确安装在你的本地服务器上。
- 检查Tomcat的server.xml文件，确认端口号（默认为8080）没有被其他服务占用。
部署Vue项目：
- 将Vue项目打包后的dist目录中的所有文件复制到Tomcat的webapps目录下。
- 你可以直接在webapps目录下创建一个新的文件夹（如myapp），然后将dist目录中的文件复制到这个新文件夹中。
- 重新启动Tomcat服务器，使新的部署生效。

三、网络配置

确保本地Tomcat服务器可访问：
- 在本地计算机上，通过浏览器访问http://localhost:8080/myapp（假设你的Vue项目部署在myapp文件夹下），确保项目能够正常访问。
配置路由器端口转发：
- 登录到你的路由器管理界面（通常通过浏览器访问http://192.168.1.1或http://192.168.0.1）。
- 找到“端口转发”或“虚拟服务器”设置选项。
- 创建一个新的端口转发规则，将外部端口（如80或443，或任何未被占用的端口）转发到你的本地计算机上Tomcat服务器的端口（默认为8080）。
- 指定内部IP地址为你的本地计算机的IP地址。
- 保存设置并重启路由器。
配置防火墙：
- 确保你的本地计算机和路由器的防火墙设置允许外部访问Tomcat服务器的端口。
- 在Windows上，可以通过“控制面板”->“Windows Defender防火墙”->“高级设置”来添加入站规则。
获取公网IP地址：
- 打开一个浏览器，搜索“What is my IP”来获取你的公网IP地址。
测试外部访问：
- 在外部网络上，使用另一台计算机或移动设备，通过浏览器访问http://你的公网IP地址:外部端口/myapp（如果外部端口不是80，则需要显式指定端口号）。
- 如果一切配置正确，你应该能够访问到你的Vue项目。

四、注意事项

确保你的本地网络拥有静态IP地址，否则每次重启路由器后IP地址可能会发生变化。
如果你使用的是动态IP地址，可以考虑使用动态DNS服务来保持域名的稳定性。
确保你的网络提供商没有阻止Tomcat服务器的端口（如8080）。在某些情况下，你可能需要联系你的网络提供商来请求打开特定的端口。
如果你的Vue项目需要与后端服务进行通信，确保后端服务也配置了相应的网络访问权限和端口转发规则。

为什么本地tomcat上服务只能在局域网访问，如何在外网公网访问

本地Tomcat服务器上的服务通常只能在局域网内访问，这主要是因为网络配置和安全策略的限制。要让Tomcat服务在外网（公网）上也能被访问，需要涉及到计算机网络中的多个方面，包括IP地址、端口转发、防火墙设置、DNS解析等。以下是详细的解释和步骤：

涉及的计算机网络知识

IP地址：
- 局域网IP：通常用于局域网内的设备间通信，如192.168.x.x或10.x.x.x。
- 公网IP：用于在互联网上唯一标识一个设备，是外网访问该设备的必要条件。
端口转发：
- 当外部请求到达路由器时，路由器需要将请求转发到局域网内的特定设备。端口转发就是设置路由器将某个外部端口（如80）的请求转发到局域网内某个设备的指定端口（如Tomcat的8080端口）。
防火墙设置：
- 防火墙用于控制网络流量的进出，确保网络安全。要让外网访问Tomcat服务，需要配置防火墙允许外部请求通过特定端口（如80或8080）。
DNS解析：
- DNS（域名系统）用于将域名解析为IP地址。如果为Tomcat服务配置了域名，则需要确保DNS解析正确，将域名指向公网IP地址。
网络协议：
- 如TCP/IP协议，是互联网通信的基础。Tomcat服务通常使用HTTP协议（基于TCP协议）进行通信。

步骤

检查Tomcat配置：
- 确保Tomcat服务器已经正确安装并正在运行。
- 修改Tomcat的配置文件（如server.xml），确保Tomcat服务监听的是正确的端口（通常是8080，但也可以配置为80或其他端口）。
配置端口转发：
- 登录到路由器的管理界面。
- 找到“端口转发”或“虚拟服务器”设置选项。
- 创建一个新的端口转发规则，将外部端口（如80）转发到Tomcat服务器的内部IP地址和端口（如192.168.x.x:8080）。
配置防火墙：
- 如果你的服务器或路由器上启用了防火墙，需要确保防火墙规则允许外部请求通过Tomcat的端口。
- 在Windows上，可以通过“控制面板”->“Windows Defender防火墙”->“高级设置”来添加入站规则。
- 在Linux上，可以使用iptables或firewalld等工具来配置防火墙规则。
获取公网IP：
- 通过搜索引擎搜索“What is my IP”来获取你的公网IP地址。
配置DNS（可选）：
- 如果为Tomcat服务配置了域名，需要确保DNS解析正确。
- 可以将域名解析到你的公网IP地址，或者使用动态DNS服务来更新域名对应的IP地址。
测试访问：
- 使用外部网络（非局域网）的设备或工具，尝试通过公网IP地址（或域名）和端口号访问Tomcat服务。
- 如果配置正确，你应该能够成功访问Tomcat服务。

注意事项

安全性：将Tomcat服务暴露在外网上会增加安全风险。务必确保Tomcat服务、操作系统和防火墙都是最新版本，并采取适当的安全措施（如使用HTTPS、设置强密码、限制访问来源等）。
网络稳定性：确保你的网络连接稳定可靠，以避免外部访问时出现中断或延迟。
性能考虑：如果Tomcat服务承载的访问量较大，需要考虑服务器的性能和扩展性。