Node项目部署到云服务器（2）----前端篇

忆柒
359 阅读4分钟

上篇文章我们部署好了后端，接下来就可以把前端也部署到服务器上了。

接下来将说明前端的两种部署方式：个人省事版，企业版（vite）

1.个人省事版(会有很多不需要的东西部署到服务器，浪费资源)

如果是vite构建的项目，我们先要设置一下配置文件，在你的项目中的vite.config.js文件中添加一个server，端口写前端运行的端口。

image.png

首先还是来到这个文件下，右键上传，同样的，我们可以删除node_modules删除或者压缩文件夹，加快上传速度。

image.png

image.png

接下来我们和之前一样，来到网站，创建一个node项目，是否安装node_modules也和之前一样。

image.png

点击更多配置，端口写前端运行端口，博主的是5173，点击放行端口，点击确定

image.png

如果此时确定之后和博主一样，可能是用了vite，而宝塔无法识别vite所有导致现在这样的情况

image.png

接下来我们设置，确定端口设置为了5173（取决于你前端运行的端口），保存修改，并且我们还要在阿里云云服务器的安全组里面手动添加一下你设置的端口

image.png

如下

image.png

此时来到模块管理，如果和博主一样啥都没有，说明依赖没装上，这里我们手动安装一下依赖。

image.png

选择pnpm，然后一键安装项目模块

image.png

之后就可以启动前端项目了

image.png

至此我们前端的项目也部署好了

我们只需要在浏览器的url栏输入（你的云服务器的公网ip地址）：（你刚刚设置的前端端口），回车就能看到你的项目啦！

如果还没有，我们就在宝塔页面的安全里面需要再放行一次5173端口（刚刚设置的你的前端运行的端口）

image.png

2.企业版(vite)

注意：后续所有新的端口记得到云服务器上去放开，宝塔的安全里面最好也放开一下（个人省事版已经教大家放开过，后面就不再提示了）

首先我们来到前端项目，npm i装一下被删除的依赖

image.png

我们来到vite.config.js文件，除了之前的server，我们再写一个base:'/dist/'，告诉vite接下来这个项目的所有文件都在dist文件里面

image.png

接下来我们前端运行npm run build打包文件

image.png

现在我们有一个dist文件

image.png

我们回到宝塔面板，创建一个可以放html的项目就都可以，这里我们创建一个php项目

image.png

这里我们安装一个Nginx（现在我们的前端项目已经是一个纯html项目了，和node已经没有关系了）

image.png

image.png

安装好之后我们回到网站，选择PHP项目，选择添加站点，输入域名，点击确定

这里如果端口是8080，会报错，修改端口(同时前端vite.config.js文件里的servser里的端口也要改)就好了，但同时项目要重新npm run build打包(记得要删除之前的dist)

image.png

端口创建好之后就是这样

image.png

双击进入，删除第一个

image.png

image.png

之后找到默认文档，在最上面加一个dist，点击保存。

image.png

然后我们进行一些Nginx的一些配置，我们找到配置文件，随便在哪一行输入以下代码（图中代码有误，以下面代码为准）

注意空格

location / {
      root     /www/wwwroot/abc.com/dist;
      index    index.html index.htm;
      try_files  $uri  $uri/  /index.html;
    }

image.png

输完之后点保存

之后我们回到文件

image.png

进入abc.com文件夹

右键上传，将我们vite打包之后的dist文件夹上传上去

image.png

上传完成之后就大功告成了。

可以在浏览器的url栏上输入（你的云服务器的公网ip地址）：（你设置的前端端口），回车就能看到你的项目啦！

3.总结

所有部署项目上线，总共就以下几个步骤：

  1. 买一台服务器 （是可以被外网访问的电脑）
  2. 本地安装 finalShell 工具 （连接远程的服务器）
  3. 使用finalShell 为远程服务器安装 宝塔 （可视化）
  4. 为服务器安装 node， mysql， 等等
  5. 将本地的项目文件上传到服务器上
  6. 启动一个xxx（node） 项目， 指定运行某一份代码
  • 前端项目
  1. 直接将整个项目代码完整上传，并作为node项目运行
  2. 利用vite，webpack等打包工具打包项目，上传打包之后的文件
  • 后端项目
  1. 直接将整个项目代码完整上传，并作为node项目运行
avatar
文章
阅读
粉丝