如果你还没有安装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的配置,但是熟练掌握后,可以轻松地部署多个应用程序。