前端学习部署node服务-腾讯云服务器宝塔模版

原创

一起重学前端

发布于 2024-10-02 15:45:05

390

发布于 2024-10-02 15:45:05

前置流程

一、购买腾讯云服务器

登录腾讯云官网（https://cloud.tencent.com/），在产品列表中选择 “云服务器”。
根据自己的需求选择服务器配置，如 CPU、内存、带宽等。对于前端学习来说，一般基础配置就可以满足初期需求，例如 1 核 2GB 内存。
选择操作系统，常用的有 CentOS、Ubuntu 等 Linux 系统。CentOS 比较稳定，适合服务器部署，这里以 CentOS 为例。
完成支付流程后，在腾讯云控制台的 “云服务器” 选项中可以看到已购买的服务器实例。

可以买个便宜的玩玩

二、配置安全组规则（重要）

在腾讯云控制台找到 “安全组” 选项，安全组就像是服务器的防火墙规则集合。
为服务器添加安全组规则，允许必要的端口访问。对于宝塔面板，需要开放 8888 端口（这是宝塔默认的访问端口），同时如果你的前端项目涉及 HTTP/HTTPS 服务，要开放 80 和 443 端口。

三、安装宝塔面板

通过 SSH 工具连接服务器。在本地计算机上打开 SSH 客户端（如 PuTTY，如果你是 Windows 系统），输入服务器的公网 IP 地址，登录用户名为 “root”，并输入购买服务器时设置的密码。
登录成功后，在 SSH 终端中输入以下命令来安装宝塔面板（以 CentOS 为例）：- yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh
安装过程中会提示你输入一些信息，按照提示操作即可。安装完成后，终端会显示宝塔面板的登录地址（一般是 http:// 服务器公网 IP:8888）、用户名和密码。

可以直接在腾讯云云服务器购买时，按模版安装宝塔

四、登录宝塔面板并进行基本配置

在浏览器中输入上述显示的登录地址，进入宝塔面板登录界面，使用提供的用户名和密码登录。
首次登录会提示安装一些必要的软件，如 Nginx、MySQL、PHP 等。对于前端学习，Nginx 是重点。Nginx 可以用于部署静态网站和反向代理等功能。
在宝塔面板的 “网站” 选项中，添加站点。输入你的域名（如果没有域名，可以使用服务器公网 IP 代替），设置网站根目录等信息。
将前端项目文件上传到网站根目录。可以通过宝塔面板提供的文件管理器进行上传，也可以使用 FTP 工具（需要在宝塔面板中配置 FTP 相关信息）。
配置 Nginx。在宝塔面板中找到网站对应的 Nginx 配置文件，根据前端项目的特点进行配置修改。例如，如果是一个单页应用（SPA），需要正确配置路由的转发规则，确保页面刷新不会出现 404 错误。
配置完成后，保存 Nginx 配置并重新启动 Nginx 服务，这样你的前端项目就可以通过服务器公网 IP 或者域名进行访问了。

部署

静态网站/api

静态网站可以直接把index.html放在网站目录下/接口需要pm2运行对应node项目

设置配置文件

{
    listen 80;
		listen 443 ssl http2;
    server_name api.xxxx.cn;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/server/stop;

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    ssl_certificate    /www/server/panel/vhost/cert/api.xxxx.cn/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/api.xxxx.cn/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;
		#SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置，可以注释或修改
    #include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    #include /www/server/panel/vhost/rewrite/api.pintuma.cn.conf;
    #REWRITE-END

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    // 配置对应接口地址
    location / {
        proxy_pass http://localhost:3000/;
    }
    location /api/ {
        proxy_pass http://localhost:3001/;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    access_log  /www/wwwlogs/api.xxxx.cn.log;
    error_log  /www/wwwlogs/api.xxxx.cn.error.log;
}