使用FinalShell连接服务器部署前端教程

一、下载FinalShell

下载地址

FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本4.5.12,更新日期2024.10.30 - FinalShell官网

选择合适版本

按照步骤正常安装

当提示安装 Winpcap 依赖，正常安装即可

安装完成

二、连接服务器

确认以后 点击快速链接

三、部署前端项目

1.打包前端项目，生成dist文件

在根目录下创建新文件夹 用来存放dist文件

直接把dist文件拖入新建的文件夹里面

2.安装软件 Nginx

sudo yum install nginx -y

nginx -t

这样的结果就表明安装完成

打开nginx的配置文件

server {
        server_name xx.xx.xx.xx;
    
        root /xxx/dist/xxx(dist里面的index地址)/;
        access_log /var/log/nginx/host.access.log;
        error_log /var/log/nginx/error.log;
    
        location / {
            try_files $uri $uri/ /index.html;
        }
    }

如果要改成域名，就把域名解析以后，在server_name改为域名

修改保存以后 重新启动查看是否有错误

此时打开服务器地址还无法访问，需要在服务器配置80

配置完成以后，刷新地址，正常访问

3.证书

配置证书

sudo yum install certbot python3-certbot-nginx -y

sudo certbot --nginx

修改nginx.conf文件

server {
        listen 443 ssl http2;
        server_name xxx.com;
    
        ssl_certificate /etc/letsencrypt/live/xxx.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/xxx.com/privkey.pem;
    
        ssl_protocols TLSv1.2 TLSv1.3;  # 推荐使用 TLSv1.2 和 TLSv1.3
        ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
        ssl_prefer_server_ciphers on;
    
        root /xxx/dist/xxx.com;
        access_log /var/log/nginx/host.access.log;
        error_log /var/log/nginx/error.log;
    
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
    
    server {
        listen 80;
        server_name xxx.com;
    
        # 强制重定向 HTTP 到 HTTPS
        return 301 https://$host$request_uri;
    }

还需要在服务器添加443端口