使用阿里云服务器和宝塔面板部署前端静态页面(保姆级教程，适合前端开发人员)

thousand_
582 阅读6分钟

1.项目打包

前端工程化下的项目打包定义：

  • 我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等。
  • 打包完的文件中不存在：.vue、.jsx、.less等文件，而是：.html、.css、.js等浏览器可以识别和直接运行的文件
  • 打包后的文件，不能直接在本地打开，而是需要部署到服务器上运行
  • 打包前，需要检查好前段项目的请求封装(请求前缀、代理规则等)
npm run build // 项目打包
npm run preview  // 预览打包的项目 -
  • 注意：打包后的项目中的 index.html不能直接在浏览器里运行，为以下几个原因：
  1. 文件协议限制：直接双击HTML文件打开时，浏览器使用 file:// 协议。而现在项目同上需要 http:// 或 http:// 协议
  2. CORS策略：浏览器的同源政策会阻止 file:// 协议下的 AJAX 请求和模块加载
  3. 资源路径问题，打包后的资源文件路径通常是相对路径，在file:// 协议下可能无法正确解析

解决打包部署的问题，有以下几种方法：

  1. 使用本地服务器预览(推荐) 你的项目已经配置了预览命令，可以直接使用
// 比如 vite 脚手架内置了
npm run preview
  1. 使用简单的HTTP服务器 如果不想用vite预览，可以用其他工具：
// 使用 Live Server (vs code插件)  鼠标点击文件右键使用该插件运行即可
  1. 部署到实际服务器 将 dist 文件夹部署到真实的Web服务器上（如Nginx、Apache等） 这一块比较复杂，需要专业的运维知识。推荐使用宝塔面板部署，可以快速上手。

2. 连接服务器、项目部署准备工作(前提已经购买了阿里云服务器)

2.1 工具准备 Xshell和Xftp

获取免费的Xshell和Xftp

2.2 使用Xshell连接远程阿里云服务器

Xshell是什么： 面向 Windows 的终端仿真器/SSH客户端，用来远程和管理 Linux/Unix服务器与网络设备。

  1. 工具界面:

xShell的工具界面

  1. 新建一个服务器连接，点击 文件=>新建 打开服务器连接界面 填入ip等服务器信息:

连接服务器

  1. 填完信息后，点击确定会让你填连接服务器的账号,输入你目标服务器的账号，点击确定即可

连接服务器账号

  1. 账号输入完成后，再输入服务器密码

链接服务器密码

  1. 登陆成功后出现如下如示：关键看到：Welcome to Alibaba Cloud Elastic Compute Service !。(表示成功登录阿里云服务器) 服务器登陆成功

2.3 使用 xftp 连接购买的阿里云服务器

xftp是什么： windows下的图形文件传输客户端，常与Xshell搭配使用。支持协议：SFTP/FTP/FTPS

  1. 基于上个步骤已连接了xSehll 的基础下点击，xshell中的xftp图标，直接打开xftp软件并连接目标服务器 xftp

  2. xftp右侧出现文件夹表示连接服务器成功1 连接服务器成功

2.3 阿里云为例手动部署Linux宝塔面板

  1. 手动部署宝塔面板 前提是连接上了阿里云服务器，工具不限，比如xShell
  2. 安装宝塔面板，xshell终端中输入如下命令：
url=https://download.bt.cn/install/install_lts.sh;if [ -f /usr/bin/curl ];then curl -sSO $url;else wget -O install_lts.sh $url;fi;bash install_lts.sh ed8484bec

根据提示输入y，并等2分钟左右： 安装宝塔面板

  1. 宝塔面板安装成功后会有地址和用户名、密码，如下图所示： 注意：1. 注意在阿里云中要开放对应的宝塔面板端口号 2. 妥善保存这个信息，如果忘记了，目前我还没有好的方式找回，只能重装宝塔面板 宝塔面板安装成功

  2. 根据上个步骤给的地址账号和密码登录宝塔面板，如下图所示： 宝塔面板

3. 在阿里云服务器部署前端vue项目，使用宝塔面板部署

3.1 开放对应端口

在服务器中开放对应给前端静态页面的端口，如：8090

3.2 在宝塔面板配置部署前端静态页面

  1. 找到对应配置目录 配置的位置
  2. 打开配置网站的弹窗 配置的步骤
  3. 配置nginx 找到nginx文件： 找到nginx文件 编辑后的nginx文件如下：主要是配置静态文件的目录和访问的端口号：如下,目录：/www/wwwroot/order_takeout-turntable 端口号：8090
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8090 default_server;
        listen       [::]:8090 default_server;
        server_name  _;
        root         /www/wwwroot/order_takeout-turntable;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
             root    /www/wwwroot/order_takeout-turntable;
             index   index.html;
             try_files $uri $uri//index.html;#解决刷新404
        }
        

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

3.3 部署注意点

  1. 如何看访问地址是使用http还是https
  2. 配置的访问网址访问不了排查(不要慌) 访问出问题

分析问题

简单来说，502错误表示：你的请求已经到达了作为“网关”或“代理”的服务器（比如Nginx），但这台服务器无法从它后面的真正处理请求的服务器（即“上游服务器”）得到有效的响应。

可以把它想象成：
你去一家餐厅（访问 47.113.179.233:8090），前台服务员（网关服务器，如Nginx）接待了你。你点了菜（发送了HTTP请求），服务员转身去后厨（上游服务器，如PHP, Node.js, Java应用等）下单。但是，后厨要么关门了，要么厨师懵了不知道怎么做菜，要么后厨和服务员之间的通道堵死了。服务员等啊等，一直拿不到菜，只好回来告诉你：“抱歉，现在后厨没法做菜，无法处理您的点单。”（返回HTTP 502错误）。

排查问题

导致502错误的常见原因（问题出在服务器那一边）
上游服务未运行：后厨根本没人。比如负责处理PHP的PHP-FPM服务挂了，或者Node.js应用进程崩溃退出了。

上游服务配置错误：网关服务器（如Nginx）配置中指定的上游服务器地址、端口错了，导致它找错了地方。

请求超时：后厨做菜太慢了。上游服务器处理请求的时间超过了网关服务器设置的等待时间（如 proxy_read_timeout），网关服务器不耐烦了，就主动断开并返回502。

资源不足：服务器内存或CPU耗尽，导致上游服务无法正常工作或响应极慢。

防火墙阻止：服务器内部的防火墙规则阻止了网关服务器和上游服务器之间的通信。

网络问题：服务器内部的网络出现故障。

3.4 大功告成，成功访问!

部署的前端

资料

前端项目部署指南

阿里云服务器宝塔面板手动部署教程

avatar
文章
阅读
粉丝