从零开始用 Express+Nuxt+Mysql+Nginx 写一个 SSR 博客

[huang303513]

项目说明

1 项目使用 Express+mysql+nuxt+nginx 写的一个项目。nuxt 用于实现服务端渲染。nginx 做代理服务器对静态资源代理。
2 项目环境是 node 的 8.5。
3 详情页使用 markdown 语法，使用 ejs 模板来渲染。兼容移动端和桌面端。
4 项目线上部署地址: www.huangchengdu.com 。欢迎访问。
5 整个项目的配置在 config 目录下面。可以根据自己的情况修改配置。比如端口号、域名等等。
6 这个项目是我玩 node 一年以来的结晶。O(∩_∩)O~。
7 整个项目布局都是 less 写的，没有使用任何第三方框架。
8 源码地址：地址。
9 测试账号 huang 123456。

项目运行

//部署,具体细节看下面
npm install
npm run build
npm run start
//开发
npm run dev

关于 nginx 代理配置

nginx 的配置文件如下：

user www www;
worker_processes 2;#设置值和 CPU 核心数一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
    use epoll;
    worker_connections 65535;
}
http
{
    include mime.types;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" $http_x_forwarded_for';

    #charset gb2312;

    server_names_hash_bucket_size 128;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 8m;

    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 128k;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml;
    gzip_vary on;

    #limit_zone crawler $binary_remote_addr 10m;
    upstream sample {  
          server localhost:5389;
	      #server 127.0.0.1:5389;  
          #server 127.0.0.1:3001;  
          keepalive 64;  
    } 
    #下面是 server 虚拟主机的配置
    server
    {
        listen 80;#监听端口
        server_name www.huangchengdu.com;
	rewrite ^(.*)$  https://$host$1 permanent;  
    }
    server
    {
        listen 443;#监听端口
        server_name www.huangchengdu.com;
	ssl on;
        index index.html index.htm index.php;
        root /usr/local/webserver/nginx/html;#站点目录
        ssl_certificate   cert/214353122570188.pem;
        ssl_certificate_key  cert/214353122570188.key;
        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_redirect off;  
               proxy_set_header X-Real-IP $remote_addr;  
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
               proxy_set_header Host $http_host;  
               proxy_set_header X-NginX-Proxy true;
               proxy_set_header Connection "";
               proxy_http_version 1.1;    
               proxy_pass http://sample;
        }
        location ~ .*\.(gif|jpg|JPG|jpeg|png|bmp|swf|ico)$
        {
	    root /usr/local/webserver/nginx/static;
            expires 30d;
	    #access_log off;
        }
        location ~ .*\.(js|css)?$
        {
	    root /usr/local/webserver/nginx/static;
            expires 15d;
	    #access_log off;
        }
	location ~ .*\.(html|htm)?$
        {
            root /usr/local/webserver/nginx/static;
            expires 30d;
           # #access_log off;
        }   
        access_log off;
    }

}

npm run build以后,然后npm run start启动服务器。最后需要把.nuxt/dist/(build 以后生成的)目录下面的所有文件和 static(我这里是/usr/local/webserver/nginx/static)目录下的所有文件都放到代理服务器的静态资源根目录。
这样才能完整的使用样式表，如果不使用代理服务器就不用了。

关于 nuxt

nuxt 是 vue 官方的服务端渲染框架。犹豫还是比较新颖的东西，坑比较多，我做的过程中也是踩坑不段。
本来还有一些功能想添加进去，精力有限暂且搞一个段落。

演示

数据库文件已经添加进入仓库。需要的同学直接拉代码就可以了。

[xqin]

https://github.com/huang303513/ExpressNuxtMysqlNginxBlog/blob/master/juejin/%E5%91%BD%E4%BB%A4%E5%88%97%E8%A1%A8.txt

https://github.com/huang303513/ExpressNuxtMysqlNginxBlog/blob/master/juejin/config/default.js

另外 楼主 是 智行 的?

[wasmir]

楼主把仓库删了改改重新传吧。。

[sobigfish]

难道不是应该先改 db 的密码-。-

[BoiledEgg]

Internal Server Error
被玩坏了。。。

[huang303513]

某个缺德的垃圾把数据库给我删了，我实在是想不通他这样做有什么好处。真是佩服这个孙子啊。

[huang303513]

@BoiledEgg 有人把数据库给我删了。

[Karsake]

在项目里明文密码就是这样的啊。。。

[vipper]

Internal Server Error

同情楼主，刚想上去看看样子呢

希望有备份吧

[thundernet8]

对于重要的机密信息 可以作为环境变量传入 nodejs 可以使用 dotenv 库读取文件内容到系统变量，比如你的环境变量放 envrc 文件，但是 gitignore 掉，git 上传一个 envrc.sample 文件作为示例，参考 https://github.com/thundernet8/GithubProfile/blob/d6a0c4c60ab4d5db0e5264f5a92f4df6ba3b40d2/env.ts#L7

[sheldoner]

502 Bad Gateway

[huang303513]

恢复了。。。

[huang303513]

总有一些垃圾突破做人的底线，云主机的数据库删除，我实在是想不通要这样做的理由。(炫耀技术？压根就不需要技术)。这种损人不利己的事做多了小心全家火葬场。
我没有改数据库密码的原因是让对项目感兴趣的同学可以零配置运行项目(我很讨厌对于一个陌生的项目做配置，很多时候都是失败告终)。方便大家参考。
如果对于数据库感兴趣的，可以加我 qq2057817622。我给你数据库备份。
@vipper
@vipper

[huang303513]

@xqin 不怕。我 云主机备份了。本身也没什么好隐藏的。也就不管这么多了。

[knva]

6666
v2 盗号老哥还是多

[qskane]

手动斜眼

[LeungJZ]

想不通删库的目的是什么。

PS，github 千万不能上传带密码的文件。

[moxiaonai]

这种配置文件不都是 ignore，然后给个 sample 么