【实战】手动使用阿里云ECS部署前端页面

准备工作

如果需要域名访问，需要购买域名，国内网站需要备案

可以先看阿里云文档，挑选合适的部署方式

如果只能自己手动部署，那继续看：

• 阿里云服务器
• 当前服务器
  • 公网IP
  • 用户名
  • 密码

开始部署

连接服务器

通过ssh 然后用用户名@密码

ssh root@XXXX

提示输入密码, 会有successful login的提示代表已连接

安装依赖

这个时候服务器需要下载一些依赖

yun install nodejs npm nginx -y

-y 表示安装过程中都选择yes

构建项目

git用来下载代码 git clone XXXXXX

npm 用来下载前端项目的依赖

安装依赖后 npm run build (根据自己的构建配置来)

这时候已经获得了构建产物

配置nginx

可以把当前目录的nginx配置，粘贴到对应的配置文件目录，需要根据自己具体的文件目录来

cp nginx.conf /etc/nginx/nginx.conf

可以使用下面命令查看目录，该命令也可以检查当前配置是否有问题

nginx -t

提供一个基础的nginx配置

user root; // 这里要是当前登录用户名
worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types; // 这行不加不会解析css
    default_type application/octet-stream;
    server {
        listen 80;
        server_name localhost; // localhost 替换成域名或者公网ip地址
        
        location / {
            root /root/web/dist; // 构建产物地址
            index index.html index.htm;
            try_files $uri $uri/ /index.html; // 单页应用配置
        }
 
    }
}

启动nginx

第一次启动nginx

systemctl start nginx 

后面配置有更新就reload nginx

systemctl reload nginx

访问页面

访问你配置的地址，成功展示出网页就是成功啦