前端如何将项目打包部署到服务器

本文详细介绍了如何使用VSCode的Remote-SSH和SFTP插件进行前端项目打包并部署到服务器,以及如何通过Nginx配置实现请求转发。步骤包括安装插件、配置服务器连接、上传文件和设置Nginx代理。
摘要由CSDN通过智能技术生成

  本篇文章从前端项目打包开始,逐步完成项目部署到服务器的操作,这次咱们采取的部署方案是通过vscode中Remote-SSH和SFTP两个插件实现项目部署到服务器,并在服务器上通过nginx代理将请求转发到对应的端口。

安装Remote-SSH插件建立服务器链接

  先将自己开发完成的本地项目进行打包,打包之后会产生一个dist文件夹,然后在vscode的扩展中搜索Remote-SSH,进行安装,安装后可以看到增加了一个类似电脑的小图标,显示小图标就表示安装完成了,如下图:  先点击小电脑图标,然后点击右侧的+号,添加远程服务器链接,之后输入ssh root@服务器地址,点击回车键,建立服务器链接的时候需要输入服务器密码,正确输入后点击回车即可,如果输入正确的服务器密码后报错,通过管理员权限打开vscode就可以解决,如下图:  进入到服务器之后,咱们就可以正常访问服务器中的文件了,这时候与建立服务器的链接就完成了,并且咱们可以通过vscode来直接修改服务器中的配置,有么有感觉方便了很多。

安装SFTP插件上传打包后的文件

  先在vscode中打开本地项目的文件夹,类似的在扩展中找到SFTP插件,安装SFTP插件后,可以发现在.vscode文件夹中增加了一个sftp.json文件,下面配置该文件,如下图:  需要在host处配置服务器IP地址,在username设置自己的用户名,一般用户名设置为root,这个remotePath表示我们上传到服务器储存的位置,根据自己的需要来进行设置,这个操作完毕之后,右键打包后的文件夹,我们可以看到上传选项,如下图:  点击该选项之后,dist文件夹就被上传到服务器咱们设置的储存位置了。

配置Nginx代理完成请求转发

  接下来,配置nginx代理完成部署,这里就不再说明nginx的安装过程了,直接来看nginx的配置,连接服务器进入到/etc/nginx/文件夹下,打开nginx.conf文件,进行nginx的配置,如下图:

  在listen处写部署的端口号,server_name可以写自己的域名,下面那个location中两行分别配置访问的文件夹和访问的文件,下面进行代理的配置,如下图:

  也在server对象中进行配置,在http://localhost:后面写真实访问的后端部署的端口,上面这个代码块的含义是,nginx代理发送的请求中如果有/api,就将其转换为真实端口。如果不能理解可以看我上一遍本地代理的博客,两者做的事情和实现思路是相同的。

总结

  把前端的请求代理和后端的请求代理放在一块对比理解之后,代理所实现功能的相关知识就更容易融会贯通了。

前端打包部署服务器的大体流程如下: 1. 部署前的准备:准备要部署项目和阿里云服务器。确保服务器操作系统是 CentOS,推荐选择7.5或7.6版本。 2. 打包项目:将前端项目进行打包,生成静态文件。 3. 连接阿里云服务器:使用本地工具连接到阿里云服务器。 4. 安装必要的软件:在服务器上安装epel仓库和nginx。epel仓库是为了方便安装一些额外的软件包,而nginx是用来作为前端项目服务器。 5. 配置nginx:启动nginx,并检查端口号的配置。如果需要访问默认端口号80,可以在nginx配置文件中进行相应的配置。 6. 上传文件到服务器:将打包好的静态文件上传到服务器上。 7. 配置域名和访问:根据需要,可以配置域名解析,让用户可以通过域名来访问项目。 总结起来,前端打包部署服务器的流程包括准备工作、打包项目、连接服务器、安装软件、配置服务器、上传文件和配置域名。这样就可以将前端项目部署到阿里云服务器上,让用户可以通过域名或公网IP来访问项目。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备](https://blog.csdn.net/Charissa2017/article/details/105886521)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值