前端如何将静态页面部署到服务器，并可以通过公网ip访问。

news2025/2/25 20:38:11

问题描述

作为卑微的前端页面仔。在我们公司项目上线的时候，一般都是我们前端 npm run build，然后直接把打出来的dist包丢给后端，后端上传到服务器完成前端的部署。这个时候我就很好奇，页面是怎么上传到服务器的呢？上传到服务器后是怎么可以访问的呢？怎么通过域名来访问呢？今天必须把它学会。

准备工作

首先要准备一台服务器，我这里选择的阿里云的服务器，因为是练手用，所以买的是最便宜的1块钱30天（因为我是新用户）的（放一个静态页面绰绰有余了）。
https://www.aliyun.com/daily-act/ecs/activity_selection?utm_content=se_1011961458

其次是上传静态文件到服务器的ftp工具，我选择的是filezilla客户端，下载地址是
https://filezilla-project.org/

服务器的购买以及相关配置

现在让我们回到第一步，去买服务器，（练手用的话直接买一个最便宜的好了）
在这里插入图片描述

配置就直接用他给的配置就好了，操作系统的话选择linux操作系统
在这里插入图片描述

服务器买好后，我们可以直接打开阿里云的控制台，来管理我们的服务器。https://ecs.console.aliyun.com/#/home

点击实例，就可以查看我们的服务器

在这里插入图片描述

然后我们点击实例名称进入到服务器的详情里面，第一步就是去配置我们的安全组规则（开放对应的端口）

在这里插入图片描述

点击配置规则
在这里插入图片描述

选择快速添加，直接像我选择的这样选就好了，开放22端口是为了ftp工具连接服务器时和服务器建立连接。
在这里插入图片描述

FTP工具配置以及链接到云服务器

打开filezilla，点击这个地方配置站点
在这里插入图片描述

协议选择SFTP-SSH协议，主机一项填写的是服务器的公网的IP，在阿里云的控制台可以查看到服务器的公网IP，端口写服务器安全组规则开放的22端口，也可以不填默认就是22端口，用户名如果买服务器后没有改动的话一般是root，密码就是服务器的密码（购买服务器的时候会填写）。

在这里插入图片描述

然后点击连接，就会看到下面的效果，到这一步的时候，我们就已经连接到了自己的远端的云服务器。

在这里插入图片描述

然后我们在FTP工具里面，在和root同级的目录创建一个文件夹，用来放我们自己的资源，这里我们就创建一个名字叫做 website 的文件夹。

在这里插入图片描述

然后我现在去自己的vue项目里面打一个包，把打包后的 dist 文件里面的静态资源，用鼠标直接拖到可视化工具我们刚刚创建的website文件夹里面。这里可以看到我已经上传到服务器上去了。

在这里插入图片描述

到这一步的时候，是不是我们就可以用公网的ip访问服务器上的静态文件了呢？答案当然是 NO~~ (颤抖音)。为什么呢？先说答案，因为没有配置nginx，不配置nginx是不能访问服务器的，那么为什么不配置nginx不能访问服务器呢？首先要解答这个问题先看一下nigix的作用：
在这里插入图片描述

云服务器本质上就是一台电脑，给你电脑的ip地址就可以访问到电脑上的静态资源了吗，显然是不可以的。那么nginx可以作为web服务器，请求发送到服务器，nginx去查找本地静态资源，nginx就做了一个中间人的角色。如果不启动nginx，是访问不到静态资源的，nginx用于http服务，如果没有安装则无法访问自己的网页。

云服务器配置nginx并启动

来到阿里云服务器控制台，点击远程连接（远程连接可以连接到服务器，模拟打开服务器的控制台，通过控制台对服务器进行操作）
在这里插入图片描述

在弹出的选项中选择第一项登录
在这里插入图片描述

填写服务器用户名密码登录
在这里插入图片描述

接下来是就是环境配置，以及nginx下载以及启动，按照步骤一步一步来就好了，首先是环境配置

1、环境配置

//安装gcc
yum install gcc-c++
 
//安装PCRE pcre-devel
yum install -y pcre pcre-devel
 
//安装zlib
yum install -y zlib zlib-devel
 
//安装Open SSL
yum install -y openssl openssl-devel

2、创建nginx目录并下载安装包

//进入usr/local目录
cd /usr/local
 
//创建nginx目录
mkdir nginx
 
//进入nginx目录
cd nginx

//下载tar包（我下载的是1.22.0版本）

wget http://nginx.org/download/nginx-1.22.0.tar.gz

//解压tar

tar -xvf nginx-1.22.0.tar.gz

3、安装nginx

//进入nginx目录
cd /usr/local/nginx/nginx-1.22.0
 
//执行命令
./configure
 
//执行make命令(要是执行不成功请检查最开始安装的四个有没有安装成功)
make
 
//执行make install命令
make install

4、启动nginx

//进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx
./nginx
 
//关闭nginx
./nginx -s quit  或者 ./nginx -s stop
 
//重启nginx
./nginx -s reload
 
//查看nginx进程
ps -ef|grep nginx

如何查看nginx是否成功启动？
输入 ps -ef|grep nginx 显示下面👇🏻这样的时候代表nginx启动成功了

在这里插入图片描述