V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
huang303513
V2EX  ›  分享创造

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

  •  
  •   huang303513 · 2018-01-19 12:09:12 +08:00 · 3806 次点击
    这是一个创建于 2260 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目说明

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

    演示

    第 1 条附言  ·  2018-01-20 09:27:51 +08:00
    数据库文件已经添加进入仓库。需要的同学直接拉代码就可以了。
    17 条回复    2018-01-22 11:52:53 +08:00
    wasmir
        2
    wasmir  
       2018-01-19 13:18:19 +08:00
    楼主把仓库删了改改重新传吧。。
    sobigfish
        3
    sobigfish  
       2018-01-19 13:34:47 +08:00
    难道不是应该先改 db 的密码-。-
    BoiledEgg
        4
    BoiledEgg  
       2018-01-19 14:04:05 +08:00
    Internal Server Error
    被玩坏了。。。
    huang303513
        5
    huang303513  
    OP
       2018-01-19 14:28:14 +08:00
    某个缺德的垃圾把数据库给我删了,我实在是想不通他这样做有什么好处。真是佩服这个孙子啊。
    huang303513
        6
    huang303513  
    OP
       2018-01-19 14:30:02 +08:00
    @BoiledEgg 有人把数据库给我删了。
    Karsake
        7
    Karsake  
       2018-01-19 14:33:20 +08:00
    在项目里明文密码就是这样的啊。。。
    vipper
        8
    vipper  
       2018-01-19 14:34:53 +08:00
    Internal Server Error

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

    希望有备份吧
    thundernet8
        9
    thundernet8  
       2018-01-19 14:38:52 +08:00 via Android
    对于重要的机密信息 可以作为环境变量传入 nodejs 可以使用 dotenv 库读取文件内容到系统变量,比如你的环境变量放 envrc 文件,但是 gitignore 掉,git 上传一个 envrc.sample 文件作为示例,参考 https://github.com/thundernet8/GithubProfile/blob/d6a0c4c60ab4d5db0e5264f5a92f4df6ba3b40d2/env.ts#L7
    sheldoner
        10
    sheldoner  
       2018-01-19 14:43:03 +08:00
    502 Bad Gateway
    huang303513
        11
    huang303513  
    OP
       2018-01-19 15:17:43 +08:00
    恢复了。。。
    huang303513
        12
    huang303513  
    OP
       2018-01-19 15:19:48 +08:00   ❤️ 1
    总有一些垃圾突破做人的底线,云主机的数据库删除,我实在是想不通要这样做的理由。(炫耀技术?压根就不需要技术)。这种损人不利己的事做多了小心全家火葬场。
    我没有改数据库密码的原因是让对项目感兴趣的同学可以零配置运行项目(我很讨厌对于一个陌生的项目做配置,很多时候都是失败告终)。方便大家参考。
    如果对于数据库感兴趣的,可以加我 qq2057817622。我给你数据库备份。
    @vipper
    @vipper
    huang303513
        13
    huang303513  
    OP
       2018-01-19 15:23:12 +08:00
    @xqin 不怕。我 云主机备份了。本身也没什么好隐藏的。也就不管这么多了。
    knva
        14
    knva  
       2018-01-19 15:25:04 +08:00
    6666
    v2 盗号老哥还是多
    qskane
        15
    qskane  
       2018-01-19 16:59:40 +08:00
    手动斜眼
    LeungJZ
        16
    LeungJZ  
       2018-01-20 14:45:19 +08:00 via iPhone
    想不通删库的目的是什么。

    PS,github 千万不能上传带密码的文件。
    moxiaonai
        17
    moxiaonai  
       2018-01-22 11:52:53 +08:00
    这种配置文件不都是 ignore,然后给个 sample 么
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3348 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:37 · PVG 21:37 · LAX 06:37 · JFK 09:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.