Nginx部署前端项目至远程服务器

第一次部署自己写的项目哈哈,其中也踩了很多坑,都是自己慢慢摸索出来的,还是很开心的,写个博客记录以下!

使用工具和环境
1.阿里云服务器
2.xshell和xftp
3.宝塔面板(傻瓜式操作,非常简单)
4.Nginx

下面开始正式教程了

1.在宝塔面板的软件商店找到Nginx并安装

没有接触过宝塔面板的小伙伴可以尝试一下,宝塔面板安装

Nginx部署前端项目至远程服务器
接下来等他自己慢慢安装好就可以了

2.点击文件,在/root目录下新建一个app文件夹,用来存放我们的html等静态文件

Nginx部署前端项目至远程服务器

3.用xshell连接服务器后,打开我们的xftp将项目传到服务器

打开文件传输
Nginx部署前端项目至远程服务器
将我们需要的文件拖进 /root/app 目录下即可,就是上个步骤我们创建的文件夹
Nginx部署前端项目至远程服务器

4.配置Nginx,这一步很重要,一定要仔细

进入宝塔面板,找到安装好的Nginx
Nginx部署前端项目至远程服务器
点击设置,弹出这样的窗口
Nginx部署前端项目至远程服务器
点击配置修改

  1. 第一个要改的地方,把 user 改成 root
    Nginx部署前端项目至远程服务器
  2. listen对应的是端口号,根据自己的情况修改
    server_name可以改成localhost
    Nginx部署前端项目至远程服务器
  3. root 后面的路径改成 /root/app,就是我们放静态资源的目录
    Nginx部署前端项目至远程服务器
    全部修改完成后点击保存,然后重启一下 Nginx 让配置文件生效

最后访问自己的域名,见证奇迹的时刻!

Nginx部署前端项目至远程服务器