如何将你的前端页面部署到服务器上?

2,326 阅读2分钟

如果你还没有安装Nginx,请参考:

Linux安装Nginx

第一步,打包前端文件

在使用Nginx部署前端应用程序之前,必须先打包前端文件。在该项目中,使用npm run build命令将前端文件打包到build目录中。

npm run build

在这里插入图片描述

第二步,上传打包好的文件到Nginx的安装目录下的html

上传打包好的前端文件到Nginx的安装目录下的html

这里是使用的nginx的默认配置,如果需要自定义存放位置的话,可以去conf文件下的Nginx.conf去配置

在这里插入图片描述 在这里插入图片描述

第三步,自定义配置

根据应用程序的需求,自定义Nginx的配置。这个步骤可以根据需要略过,如果只是简单的部署前端应用程序,则可以使用Nginx的默认配置。

在这里插入图片描述 在这里插入图片描述

第四步,配置Nginx代理

将Nginx配置为代理服务器,将前端和后端应用程序的请求代理到相应的服务器和端口。在该项目中,使用/api作为代理路径。

在这里插入图片描述 这里的前端对应的是这样的: 在这里插入图片描述 后端对应:

server.context-path 起到在ngnix分发中的作用

这个点非常重要!!

在这里插入图片描述 这里配置了我四个小时

在这里插入图片描述

在网上找到的全是乱七八糟的配置,哎。。。。。

第五步,启动Nginx

在完成Nginx的配置后,启动Nginx服务器。

在这里插入图片描述 或者重启Nginx:

./nginx -s reload

第六步,访问你服务器的地址

在完成前面的所有步骤后,就可以通过访问服务器地址来查看已部署的应用程序。

在这里插入图片描述

使用Nginx部署前端和后端应用程序需要进行多个步骤,但是整个过程并不复杂。对于初学者来说,可能需要花费一些时间来熟悉Nginx的配置,但是熟练掌握后,可以轻松地部署多个应用程序。