Vue、Node全栈项目~面向小白的博客系统~ (2)

首先需要安装「nodeJs」,百度安装方式很多,请自选其一,安装完成后node -v,能打印出版本代表安装完成, 安装完成后设置为淘宝镜像:「npm config set registry https://registry.npm.taobao.org」

选装[「nvm」(node管理工具), 「git」]

「nginx」 安装可以看这里,或者百度教程很多

「mysql」 百度一下,你就知道~~

「navicat」(数据库操作工具), 可以使用「navicat注册机」破解,教程点此

「打开navicat连接上服务器的数据库,连接成功即可」

「pm2」(PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单)

安装命令:npm install pm2@latest -g

pm2 -v打印版本即安装成功

打开服务器和阿里云上相应的端口(3306,5008,80)

「nginx配置」

为什么是5008,因为我koa监听的是5008端口

这里给出我的nginx配置

user  root root;
worker_processes auto;
error_log  /www/logs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;
events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
        #include luawaf.conf;

    # 设置缓存路径并且使用一块最大100M的共享内存,用于硬盘上的文件索引,包括文件名和请求次数,每个文件在1天内若不活跃(无请求)则从硬盘上淘汰,硬盘缓存最大10G,满了则根据LRU算法自动清除缓存。
    proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

 include proxy.conf;

    default_type  application/octet-stream;
    
    server_names_hash_bucket_size 512;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 100m;

    sendfile   on;
    tcp_nopush on;

    keepalive_timeout 60;

    tcp_nodelay on;

    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 256k;
 fastcgi_intercept_errors on;
    
    #开启和关闭gzip模式
    gzip on;
    #gizp压缩起点,文件大于1k才进行压缩
    gzip_min_length  1k;
    # 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers     4 16k;
    #nginx对于静态文件的处理模块,开启后会寻找以.gz结尾的文件,直接返回,不会占用cpu进行压缩,如果找不到则不进行压缩
    gzip_static on;
    # 识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
    gzip_http_version 1.1;
    # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
    gzip_comp_level 1;
    # 进行压缩的文件类型。
    gzip_types     text/plain application/json application/javascript application/x-javascript text/javascript text/css application/xml image/jpeg image/gif image/png video/mpeg audio/x-pn-realaudio audio/x-midi audio/basic audio/mpeg audio/ogg audio/* video/mp4;
    # 启用应答头"Vary: Accept-Encoding"
    gzip_vary on;
    # nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
    gzip_proxied   expired no-cache no-store private auth;
    # (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库
    gzip_disable   "MSIE [1-6]\.";

    limit_conn_zone $binary_remote_addr zone=perip:10m;
 limit_conn_zone $server_name zone=perserver:10m;

    server_tokens off;
    access_log off;

    # 是否启用在on-the-fly方式压缩文件,启用后,将会在响应时对文件进行压缩并返回。
    brotli on;
    # 启用后将会检查是否存在带有br扩展的预先压缩过的文件。如果值为always,则总是使用压缩过的文件,而不判断浏览器是否支持。
    brotli_static always;
    # 设置压缩质量等级。取值范围是0到11.
    brotli_comp_level 6;
    # 设置缓冲的数量和大小。大小默认为一个内存页的大小,也就是4k或者8k。
    brotli_buffers 16 8k;
    # 设置需要进行压缩的最小响应大小。
    brotli_min_length 20;
    # 指定对哪些内容编码类型进行压缩。text/html内容总是会被进行压缩
    brotli_types text/plain application/json application/javascript application/x-javascript text/javascript text/css application/xml image/jpeg image/gif image/png video/mpeg audio/x-pn-realaudio audio/x-midi audio/basic audio/mpeg audio/ogg audio/* video/mp4;
server {
    listen    80;
    # 您的域名
    server_name xxxxxx.xxx; 
    location ^~ / {
        proxy_cache imgcache;
        proxy_cache_key $scheme$proxy_host$uri$is_args$args;
        proxy_cache_valid  200 304 302 24h;   
        proxy_pass 域名:5008;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    
        proxy_set_header Host $http_host
        proxy_set_header X-Nginx-Proxy true;
        proxy_redirect off;
        rewrite ^.+(?<!js|css|png|map)$ /index.html break;
        autoindex on;
        index index.htm index.html;
        set $fallback_uri /index.html;
        if ($http_accept !~ text/html) {
            set $fallback_uri /null;
        }
        try_files $uri $uri$fallback_uri = 404;
    }
    location ^~ /pc {
        proxy_pass 域名:5008/back;
        index index.htm index.html;
    }
}
include /www/server/panel/vhost/nginx/*.conf;
}

一切准备工作已就绪,可以把项目部署到服务器上了

「执行 npm run build 命令分别打包前台和后台」 执行打包后的结构是这样的

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyfzwf.html