这星期,自己做了一个前端项目,想把它打包到服务器,了解一下将项目打包到服务器的流程。

一、首先

需要有一个服务器来存放你的项目,由于公司的项目使用的阿里云服务器,所以我也在阿里云服务器买了一个1核2G带宽1M的Ecs服务器,操作系统是centos_7_04_64。

搭建服务器登录chatgpt 搭建的服务器_搭建服务器登录chatgpt


这个服务器很便宜,不知道是我第一次购买还是本来价格就样,一个月只有19.9元。

接着需要在秘钥管理里面设置一下云服务的登录密码,用这个登录密码可以使用远程登录软件登录并配置服务器。

搭建服务器登录chatgpt 搭建的服务器_阿里云服务器_02


我使用了Finalshell软件用来管理我的云服务器,下面是我登录成功的状态:

搭建服务器登录chatgpt 搭建的服务器_搭建服务器登录chatgpt_03

二、配置Nginx服务器

有了服务器以后需要配置Nginx,进行反向代理才可以使得你的项目能够被访问,我通过下面大佬介绍的方法,成功的配置了Nginx服务器。
配置Nginx 支持https 支持https 配置key,crt 配置key,crt 常用命令:常用命令

三、将项目打包到服务器

将上面的Nginx服务配置完成以后,在浏览器输入的IP地址,就能够有访问到Nginx页面,接着是把项目打包到服务器并且在浏览器里面输入服务器地址可以访问到:

搭建服务器登录chatgpt 搭建的服务器_服务器_04


这个dist文件是我的打包项目文件夹,然后需要在conf/nginx.conf文件中配置一下项目信息:

搭建服务器登录chatgpt 搭建的服务器_nginx_05


然后把项目地址填写在配置文件中:

搭建服务器登录chatgpt 搭建的服务器_搭建服务器登录chatgpt_06


然后将配置文件保存,并且重启Nginx服务器,如果一切正常的话,就可以在浏览器中访问到刚才打包的项目:

搭建服务器登录chatgpt 搭建的服务器_阿里云服务器_07


这个就是配置成功的界面。阿里云服务器默认开启80端口,如果有多个不同的项目上传的话,就需要去阿里云Ecs服务器控制台,配置一下安全组,将不同项目配置在不同的端口上:

搭建服务器登录chatgpt 搭建的服务器_nginx_08


上图新增的8081就是监听访问我项目的端口。到这里基本就实现了服务器的基础配置,并实现打包项目到服务器访问功能,但是相信大家也看到了,我的服务器没有绑定域名,只能通过访问IP地址才能访问服务器,所以我下次常识将服务器绑定域名,并实现项目的访问。