当前位置：首页 > news >正文

服务器从安装到部署全过程（二）

news 来源：原创 2024/4/18 12:54:40

OK! 上一篇文章中大概尝试安装mysql、nginx、nodeJs、pm2 的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝试中，将进一步进行服务器的基础配置，以及前端应用 node、pm2 部署

nginx

经过上次 nginx 已经安装至服务器中了，在这里面主要介绍一下部署相关所需要的配置，例如：监听端口、服务转发、静态资源、ssl 证书（https）的配置

静态资源

在我们没有后端服务的时候，只是想要写一些demo或者静态页面时，就可以使用nginx作为静态资源服务器，可以被外网访问到，以下就是具体的配置了，可以在nginx.conf 中建立二级域名，来搭建。

http {
    server {
        listen            80; # 监听的端口号
        server_name        static.scrscript.com # 转发的名称 也就是二级域名 不过二级域名虽然不需要重新备案但是 域名解析要有 static 关键字
        location /  {
            root        /cloud/static
        }
    }
}

说明：监听的 80 端口然后转发名称为 server_name 所对应的静态路径为 /cloud/static/ 其实就是 location root + localtioon name 这样就nginx就可以读取到 /cloud/static/ 目录下的文件了，server_name 设置二级域名时前缀后面最好跟的是自己的域名 自定义前缀+自己的域名，而域名解析最好要加上*得以匹配其他二级域名来访问

服务器静态的资源的转发其实有两种写法:

location / {
    root /cloud/static # 这种写法 主要是 location root + location name
    # alias /cloud/static # 这种写法就睡 就是直接location alias  的路径信息了
}

检验一下

静态文件

服务转发

当我们有后端服务时，我们那么我们可以通过nginx的转发配置，来让我们的网站可以被访问到

http {
    # 使用upstream（上游）模块
    # server 监听的端口
    # weight 权重
    # max_fails 最大允许失败数
    # fail_timeout max_fails次失败后，暂停时间
    upstream blog {
        #ip_hash;
        server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
    }
    
    server {
        listen            80 default;
        server_name        _;
        location / {
            proxy_pass: http://blog;
        }
    }
}

说明：在请求的过程中如果请求的地址与 server_name 匹配上那么就会采用这个配置如果都不匹配那么就会先行查看 listen 监听的域名后有default 配置项的，注意 default 只能写一个。

转发说明：

upstream 中的 server 监听的是服务器中启动的端口
当请求匹配上 server server_name 时就会进行匹配 location
在匹配成功 location 中的反向代理proxy_pass 为 http:// + upstream 时
就会代理到 upstream 中的 server 监听的端口

检验一下

服务转发

nginx 配置SSL（https）

平常我们部署的时候，会发现浏览器的地址栏会有(http://) 然后会有不安全的字样, 哼～！作为强迫症可是不想有这种字样，那么我们就来配置https 安全吧

首先要先去购买 ssl 证书

aliyun ssl 证书

当然还是要买免费的啦，个人需求，嘿嘿～

当购买完成以后，需要一定时间来等待证书签发，如果签发完成了以后，就来下载证书信息
因为我们转发是使用 nginx 来写的所以应该使用 nginx 版本证书类型，下载完成后，需要把这些证书放在服务器中，当然证书的位置还是要放在 nginx.conf 所在的文件夹中
然后我们就开始修改 nginx.conf 文件吧

http {
    # 使用upstream（上游）模块
    # server 监听的端口
    # weight 权重
    # max_fails 最大允许失败数
    # fail_timeout max_fails次失败后，暂停时间
    upstream blog {
        #ip_hash;
        server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
    }
    
    server {
        listen 443 ssl; # 一定要开启 443 服务器端口
        server_name xxx.com;  # 需要ssl的域名
        ssl on;
        # root /cloud/node/;
        # index index.html index.htm;
        ssl_certificate  cert/a.pem; # ssl 证书在服务器中相对于 nginx.conf 的路径
        ssl_certificate_key cert/a.key; # ssl 证书在服务器中相对于 nginx.conf 的路径
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        location / {
            proxy_pass http://blog;
        }
    }
    
    server {
        listen            80 default;
        server_name        _;
        rewrite ^(.*)$  https://$host$1 permanent; # 重定向到 https
        location / {
            proxy_pass: http://blog;
        }
    }
}

注意一定要重启 nginx nginx -s reload

哈哈哈哈小锁还有 https

前端部署

在这里着重来说一下 vue 项目的部署过程，还有 html 文件怎么在浏览器中访问到

html 静态资源访问

其实在上面 nginx 中，我们配置了 nginx 静态资源服务器，其实静态资源的部署非常简单就是直接把 html 文件放在静态资源所配置的目录就可以了，这样我们平时写的项目或者 demo 都可放在这个目录下，来实现浏览

vue 单页应用部署

blog 的后端是使用的是 node-express 脚手架，在 express 脚手架中 express.static 定义的是静态资源所在的位置，我们可以直接放在项目的根目录下然后启动项目就可以直接访问到了。
静态资源访问路径： app.use('' ,express.static(path.join(__dirname, 'dist')));
请看我的项目结构

上传至服务器后我们可以用 pm2 来启动达到负载均衡, 守护进程的效果 pm2 start xxx