简单的Ecs服务器部署前端项目并且上线使用

先嫖个服务器

自己嫖个服务器=>阿里云试用三个月

装环境

1、远程连接=>通过会话管理远程连接=>免密登录=>sudo su 切换成root身份
2、直接装docker，可以参考官方指南，但也只能是参考，很多时候不顶用
3、注意服务器版本，包安装器就不在这里的讨论范围，总之就是换镜像下载
感谢一篇帖子，这里。

不纠结命令细节，总之这是可以用的
sudo yum install -y yum-utils
dnf install -y device-mapper-persistent-data lvm2
dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
dnf list docker-ce
dnf install -y docker-ce --nobest

4、pull镜像，node和nginx
感谢另一篇帖子，这里。
思路还是换源，把这个json写入文件里面去。

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://yxzrazem.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

5、下载，没什么好说的

docker pull node 
docker pull nginx

开始准备工作

需要注意一点，打包的docker镜像是封闭的，即使你运行之后对它进行访问或者怎么样，只要它停止，重新运行，一切恢复。
1、准备前端，我是在tmp下新建一个web文件夹存放（已经打包好）文件，以及nginx的公共配置文件，后续项目多了结构就需要相应地改
2、准备后端，在tmp下新建一个node文件夹存放后端代码（直接是代码）
3、为让这一切变得比较直观，我使用cyberduck，
直接新建连接=>选择SFTP(SSH文件传输协议)=>用户名一般是root，密码你看看回阿里云重置实例密码，然后重启=>如果有秘钥就选择秘钥位置=>然后登录。（密钥对就是设置好了，绑定实例，然后保存好，后面也会用到）
4、部署后端，上传代码到node文件夹里面。比如你把代码存在local文件夹下，文件夹里面有src，package.json等文件，然后你就在linux上cd到src同级的目录，使用ll就能看到所有的文件，然后使用下面代码作为dockerfile（必须要有dockerfile文件，写好docker要做的事情）（还需要端口设置好通过哪个端口进入后端服务的）

// 这是运行的src里面的文件的部分
const PORT = 5001

app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`)
})

# 使用 Node.js 官方提供的镜像作为基础镜像
# FROM node:latest
# 我的项目因为有些依赖问题，选择使用16.14可以避免报错
FROM node:16.14
# 设置工作目录
WORKDIR /app

# 切换到root用户以获得管理员权限
USER root

# 将应用程序代码复制到容器中
COPY . .

# 安装依赖
# RUN npm install
# 使用yarn，加上yarn.lock文件，可以更快打包
RUN yarn
# 暴露端口
EXPOSE 5001

# 启动应用程序
CMD ["npm", "start"]

然后使用命令

# 使用服务器进行打包镜像，也可以本地打包好上传到dokcer，下面再说
docker build -t my-node-app /tmp/node/local
# 把服务器的5001（主机上的端口）暴露为docker这个镜像里面的5001（容器上的端口）
docker run -p 5001:5001 -v /tmp/node/local:/container/path/to/app my-node-app
# 启动完成后就ok了，直接访问公网ip:5001加你的路由就可以了

5、可以本地进行docker打包，然后再上传到docker仓库，在linux上拉下来然后运行，这种方式有比较好的兼容性，有什么问题能够直接在本地解决
6、部署前端，前端的部署比较复杂一些
也是一样，有本地打包部署，也有linux流水线集成部署。
目前先采用本地打包的方案，
在本地打包完成以后，把打包的dist文件夹上传到上面所说的web文件夹里面，然后把nginx的配置文件放进去

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    server {
        listen 80;
        server_name 你的公网ip;
        root /usr/share/nginx/html; # 将该行添加到服务器块中
        location / {
            # 尝试匹配静态文件
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            # 反向代理
             proxy_pass http://你的服务器ip:5001;


        }


    }
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

然后直接运行docker的nginx容器，制定好端口号就可以了，不用在服务器上额外打包
一些细节后面再补，这里加一下须知
vite的代理，只代理本地转发，不会打包进dist，所以必须在nginx上配置转发代理，注意上面的配置
部署完后，就可以直接访问前端，这个时候已经可以代发到服务器，一个简单的项目就完成了。