Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置

庚子说 發表於 2023-2-6 15:19:00

Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置

Web 服务器是一种用于存储，处理和传输 Web 内容的软件。它是一种特殊类型的服务器，具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言，如 PHP，JavaScript，Ruby，Python 等，并且支持动态生成 Web 页面。常见的 Web 服务器包括 Apache，Nginx，Microsoft IIS 等。对于目前流行的前后端分离开发模式项目，前端往往需要使用 Web 服务器进行独立部署。
 
一、Nginx
Nginx 一般是前端项目部署首选的 Web 服务器。
 
使用 Nginx 作为服务器部署 Vue 项目步骤如下：
<ol>
<li>
安装 Nginx：如果还没有安装 Nginx，请先安装它。
</li>
<li>
构建 Vue 项目：使用命令“npm run build”在 Vue 项目中构建生产版本的 Vue 项目。
</li>
<li>
复制 dist 文件夹：将生成的 dist 文件夹复制到 Nginx 的 html 文件夹中。
</li>
<li>
配置 Nginx：编辑 Nginx 的配置文件（通常为 nginx.conf），添加以下内容以配置对项目的访问：
</li>
</ol>
<pre class="language-nginx highlighter-hljs"><code>server {
listen 80;
server_name your_domain_name;
root /path/to/your/dist;

location / {
 try_files $uri $uri/ /index.html;
}

# 代理转发接口请求
location /api {
 proxy_pass http://service_api_ip:service_api_port/service_api/;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}</code></pre>
<ol start="5">
<li>
重启 Nginx：使用命令“nginx -s reload”重启 Nginx。
</li>
<li>
浏览部署的 Vue 项目：通过浏览器访问 http://your_domain_name/，查看部署的 Vue 项目。
</li>
</ol>
请注意：以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址。如果尚未配置域名，请相应地使用服务器的 IP 地址替代。
二、IIS
使用 IIS 作为服务器部署 Vue 项目的步骤如下：
<ol>
<li>
构建 Vue 项目：在 Vue 项目中使用命令“npm run build”构建生产版本的 Vue 项目。
</li>
<li>
安装 IIS：如果尚未安装 IIS，请先安装 IIS。
</li>
<li>
创建站点：在 IIS 中创建一个新站点，将生成的 dist 文件夹中的文件复制到站点的根目录中。
</li>
<li>
配置 Default Document：在 IIS 中的站点配置中，将“index.html”设置为默认文档。
</li>
<li>
配置 URL 重写：安装 URL 重写模块（ARR：Application Request Routing），然后在 IIS 中的站点配置中添加以下 URL 重写规则：
</li>
</ol>
<pre class="language-xml highlighter-hljs"><code><rule name="proxy_forwarding" stopProcessing="true">
<match url="^(.*?)/?api/(.*)$" />
<conditions>
 <add input="{HTTP_HOST}" pattern="^current_site_ip:current_site_port$" />
</conditions>
<action type="Rewrite" url="http://service_api_ip:service_api_port/service_api/{R:2}" />
</rule>

</code></pre>
<ol start="6">
<li>启动站点：启动站点，通过浏览器访问站点 URL 查看部署的 Vue 项目。</li>
</ol>
请注意：以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址。如果尚未配置域名，请相应地使用服务器的 IP 地址替代。
三、Apache (httpd)
使用 Apache 作为服务器部署 Vue 项目的步骤如下：
<ol>
<li>
构建 Vue 项目：在 Vue 项目中使用命令“npm run build”构建生产版本的 Vue 项目。
</li>
<li>
安装 Apache：如果尚未安装 Apache，请先安装 Apache。
</li>
<li>
配置 Apache：配置 Apache 以让其可以提供静态文件。可以通过在 Apache 配置文件中添加以下内容来完成此操作：
</li>
</ol>
<pre class="language-xml highlighter-hljs"><code><Directory "/var/www/html">
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory></code></pre>
<ol start="4">
<li>
复制文件：将生成的 dist 文件夹中的文件复制到 Apache 的根目录下的 /var/www/html 目录中。
</li>
<li>
配置 URL 重写：安装 mod_rewrite 模块，然后在 Apache 配置文件中添加以下 URL 重写规则：
</li>
</ol>
<pre class="language-xml highlighter-hljs"><code><IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ -
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html
</IfModule></code></pre>
<ol start="6">
<li>
重启 Apache：使用命令“sudo service apache2 restart”重启 Apache。
</li>
<li>
测试：通过浏览器访问服务器的 IP 地址或域名，查看部署的 Vue 项目。
</li>
</ol>
请注意：以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址。如果尚未配置域名，请相应地使用服务器的 IP 地址替换。另外，配置文件路径和命令可能因操作系统不同而有所不同，请根据实际情况进行调整。
其中 2.4 版本的 反向代理（即代理转发对服务接口的请求）功能配置具体详细配置说明请参考 官方文档。
四、Apache Tomcat
经实践，Apache Tomcat 对请求的代理转发功能有限（无法配置对特定 URIs 请求的转发，如：http://domain:port/api/），无法实现对 Vue/ React/ Angular 前端项目的部署。如果要扩展 Apache Tomcat 的代理转发功能，需要 Apache httpd 的 mod_proxy 模块支持。
使用 Apache Tomcat 作为服务器部署 Vue 项目步骤如下：
<ol>
<li>
准备工作：确保已经安装了 Apache Tomcat，并且知道其安装路径。
</li>
<li>
构建 Vue 项目：在项目根目录中执行 <code>npm run build</code> 命令以构建项目。构建完成后，会在项目根目录中生成一个 "dist" 目录，其中包含了所有的静态文件。
</li>
<li>
将 "dist" 目录复制到 Apache Tomcat 的 webapps 目录中：例如，如果 Apache Tomcat 安装在 "C:\Tomcat" 中，则可以将 "dist" 目录复制到 "C:\Tomcat\webapps" 中。
</li>
<li>
重命名 "dist" 目录：将 "dist" 目录重命名为想要的名称，例如 "my-app"。
</li>
<li>代理转发配置：修改 Apache Tomcat 的配置文件，打开 "C:\Tomcat\conf\server.xml" 文件，并在其中添加以下内容：
<pre class="language-xml highlighter-hljs"><code><Connector port="8080" protocol="HTTP/1.1"
 connectionTimeout="20000"
 redirectPort="8443"
 proxyName="localhost"
 proxyPort="<PROXY_PORT>"
 /></code></pre>
其中，"<PROXY_PORT>" 是后端 API 服务器所在主机的端口号。
</li>
<li>
启动 Apache Tomcat：运行 Apache Tomcat 安装目录中的 "bin/startup.bat" 文件以启动 Apache Tomcat。
</li>
<li>
访问 Vue 应用程序：在浏览器中访问 "http://localhost:8080/my-app"（其中 "my-app" 是在第 4 步中命名的名称），应该就可以看到 Vue 应用程序。
</li>
</ol>
注意：以上内容假设使用的是 Tomcat 的默认端口8080。如果使用了其他端口，请相应地更改浏览器访问地址。
  
来源：https://www.cnblogs.com/yuzhihui/p/17095524.html

頁: [1]

琼殿技术论坛's Archiver

Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置