基于Node + Express的VUE SSR基础服务框架

下载 & 安装

1. Install se.vuessr command-line tool
   npm install se.vuessr-cli -g
2. Initialization project
   a) vuessr init
   b) vuessr init <GITHUB-PACKAGE-VERSION>
   c) vuessr init <GITHUB-PACKAGE-VERSION> -n <PROJECT-NAME>
   d) vuessr init <GITHUB-PACKAGE-VERSION> -p <PROJECT-PATH>
   e) vuessr init <GITHUB-PACKAGE-VERSION> -n <PROJECT-NAME> -p <PROJECT-PATH>
   f) vuessr init -p <PROJECT-PATH>
   g) vuessr init -n <PROJECT-NAME>
   h) vuessr init -p <PROJECT-PATH> -n <PROJECT-NAME>

   Example:
      vuessr init -p D:/wwwroot -n vuessr
      vuessr init -p /data/wwwroot -n vuessr

相关命令

编绎: npm run ssr:build
开发: npm run ssr:dev
生产: npm run ssr:start

Windows启动命令(依赖pm2服务)

开发模式：AppServer.bat
生产模式：AppServer.bat prod

Linux/Mac OS启动命令(依赖pm2服务)

开发模式：./AppServer.sh
生产模式：./AppServer.sh prod

本地测试地址

URL: http://localhost:9000
     https://localhost:9443

如何创建本地SSL证书

#创建服务器端KEY
openssl genrsa -des3 -out server.key 1024
123456
#移除服务器端KEY验证
openssl rsa -in server.key -out server.key
#创建服务器端证书
openssl req -new -key server.key -out server.csr -config D:/app/openssl-0.9.8h-1-bin/share/openssl.cnf

#创建客户端KEY
openssl genrsa -des3 -out client.key 1024
#移除客户端KEY验证
openssl rsa -in client.key -out client.key
#创建客户端证书
openssl req -new -key client.key -out client.csr -config D:/app/openssl-0.9.8h-1-bin/share/openssl.cnf

#创建CA
openssl req -new -x509 -keyout ca.key -out ca.crt -config D:/app/openssl-0.9.8h-1-bin/share/openssl.cnf

#签名
openssl ca -in server.csr -out server.crt -cert ca.crt -keyfile ca.key -config D:/app/openssl-0.9.8h-1-bin/share/openssl.cnf 
openssl ca -in client.csr -out client.crt -cert ca.crt -keyfile ca.key -config D:/app/openssl-0.9.8h-1-bin/share/openssl.cnf

Nginx配置示例参考(SSR服务超时降级SPA模式)

upstream node_appserver {
    server 127.0.0.1:9000  weight=5 max_fails=2 fail_timeout=15s;  #SSR
    server 127.0.0.1:10080 weight=1 max_fails=2 fail_timeout=15s;  #SPA
}

upstream node_appserver_ssl {
    server 127.0.0.1:9443  weight=5 max_fails=2 fail_timeout=15s;  #SSR
    server 127.0.0.1:10443 weight=1 max_fails=2 fail_timeout=15s;  #SPA
}

###############################
# SSR MODE Server             #
###############################

server {
    listen       9080;
    server_name  localhost;

    #强制到HTTPS
    return 301 https://$host:9083$request_uri;

    root /data/app/se.vuessr/dist;

    location ~* \.(gif|jpg|jpeg|png|bmp|swf|svg|eot|ttf|woff)$ {
        expires 7d;
        break;
    }
    location ~* \.(css)$ {
        expires 3d;
        break;
    }
    location ~* \.(js)$ {
        expires 3d;
        break;
    }
    location = /manifest.json {
        try_files $uri $uri /vue-ssr-client-manifest.json = 200;
        break;
    }
    location ~* \.(json)$ {
        expires 15m;
        break;
    }

    location / {
        proxy_ignore_client_abort   on; 
        proxy_send_timeout          15;
        proxy_connect_timeout       15;
        proxy_read_timeout          15;
        proxy_buffering             on;
        proxy_buffer_size           32k;
        proxy_buffers               8 32k;
        proxy_busy_buffers_size     64k;
        proxy_next_upstream         http_500 http_502 http_503 http_504 http_404 error timeout invalid_header;
        proxy_pass                  http://node_appserver;
        proxy_set_header            Host            $http_host;  
        proxy_set_header            X-Real-IP       $remote_addr; 
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for; 
        break;
    }
}

server {
    listen       9083 ssl http2; # 开启http2
    server_name  localhost;

    ssl on;

    ssl_certificate      /data/app/se.vuessr/conf/server/ssl/server.crt;
    ssl_certificate_key  /data/app/se.vuessr/conf/server/ssl/server.key;

    #ssl_session_cache    shared:SSL:1m;
    #ssl_session_timeout  5m;

    #ssl_ciphers  HIGH:!aNULL:!MD5;
    #ssl_prefer_server_ciphers  on;

    root /data/app/se.vuessr/dist;

    location ~* \.(gif|jpg|jpeg|png|bmp|swf|svg|eot|ttf|woff)$ {
        expires 7d;
        break;
    }
    location ~* \.(css)$ {
        expires 3d;
        break;
    }
    location ~* \.(js)$ {
        expires 3d;
        break;
    }
    location = /manifest.json {
        try_files $uri $uri /vue-ssr-client-manifest.json = 200;
        break;
    }
    location ~* \.(json)$ {
        expires 15m;
        break;
    }

    location / {
        proxy_ignore_client_abort   on; 
        proxy_send_timeout          15;
        proxy_connect_timeout       15;
        proxy_read_timeout          15;
        proxy_buffering             on;
        proxy_buffer_size           32k;
        proxy_buffers               8 32k;
        proxy_busy_buffers_size     64k;
        proxy_next_upstream         http_502 http_504 error timeout invalid_header;
        proxy_pass                  https://node_appserver_ssl;
        proxy_set_header            Host            $http_host;  
        proxy_set_header            X-Real-IP       $remote_addr; 
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for; 
        break;
    }
}

###############################
# SPA MODE Server             #
###############################

server {
    listen       10080;
    server_name  localhost;

    #强制到HTTPS
    return 301 https://$host:10443$request_uri;

    root /data/app/se.vuessr/dist;

    location ~* \.(gif|jpg|jpeg|png|bmp|swf|svg|eot|ttf|woff)$ {
        expires 7d;
        break;
    }
    location ~* \.(css)$ {
        expires 3d;
        break;
    }
    location ~* \.(js)$ {
        expires 3d;
        break;
    }
    location = /manifest.json {
        try_files $uri $uri /vue-ssr-client-manifest.json = 200;
        break;
    }
    location ~* \.(json)$ {
        expires 15m;
        break;
    }

    location / {
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}

server {
    listen       10443 ssl http2; # 开启http2
    server_name  localhost;

    ssl on;

    ssl_certificate      /data/app/se.vuessr/conf/server/ssl/server.crt;
    ssl_certificate_key  /data/app/se.vuessr/conf/server/ssl/server.key;

    #ssl_session_cache    shared:SSL:1m;
    #ssl_session_timeout  5m;

    #ssl_ciphers  HIGH:!aNULL:!MD5;
    #ssl_prefer_server_ciphers  on;

    root /data/app/se.vuessr/dist;

    location ~* \.(gif|jpg|jpeg|png|bmp|swf|svg|eot|ttf|woff)$ {
        expires 7d;
        break;
    }
    location ~* \.(css)$ {
        expires 3d;
        break;
    }
    location ~* \.(js)$ {
        expires 3d;
        break;
    }
    location = /manifest.json {
        try_files $uri $uri /vue-ssr-client-manifest.json = 200;
        break;
    }
    location ~* \.(json)$ {
        expires 15m;
        break;
    }

    location / {
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}