前端第一次部署纯前端项目(阿里云ESC服务器+nginx)

173 阅读2分钟

一、向kimi了解大致流程

image.png image.png

二、首先得需要在阿里云上买一个ESC服务器,我这里直接用的后端同学的

三、连接服务器并登录

image.png

四、上传dist文件 - scp命令或者可视化上传

1、这里的可视化上传,也可以通过这里了解服务器里的文件结构 image.png

2、需要放在root可以访问的目录,不然nginx访问有问题

➡ 所以,我将dist文件夹放在了新建的www文件夹下 image.png

tips

当时上传的时候发现只能上传文件, 可以将本地dist文件压缩zip进行上传,然后通过cd到对应的目录下,unzip+文件夹名进行解压

3、在可视化下不能直接上传到www文件夹,所以我的解决办法是上传到/home文件夹下,再进行移动

image.png

tips

对于移动

  • 我会先cd到dist文件所在的文件夹
  • 再在这里输入mv /www dist

4、为什么要移动呢?不可以就在/home文件夹下吗?答案是不可以

我当时是上传的/home下面的一个文件夹里,然后继续配置,这样会导致 image.png 原因是 - 文件权限问题 5886719fec064cc481f11644d61e770.png

五、路径:/etc/nginx/nginx.conf ➡在这里面新增配置文件

1、通过vim配置 文件名.conf 来新建Nginx的配置文件 (❗/etc下的文件要root账户才行)

一些常用linux操作

  • i-开始编辑
  • esc-退出编辑模式
  • :q!-不保存并退出
  • :wq-保存并退出

问题记录

碰到这样报错是因为没有升级为管理员权限

image.png image.png
➡ 解决方法
image.png

2、我配置的 company.conf

image.png

image.png

六、重启Nginx服务 -> nginx -s reload

七、通过域名访问,也就是配置文件中的server_name

我的就是 company.myblog.run/

完结撒花 ❀