用Express+Nuxt從零開始寫一個(gè)SSR博客

項(xiàng)目說明

1項(xiàng)目使用Express+mysql+nuxt+nginx寫的一個(gè)項(xiàng)目。nuxt用于實(shí)現(xiàn)服務(wù)端渲染。nginx做代理服務(wù)器對(duì)靜態(tài)資源代理
2項(xiàng)目環(huán)境是node的8.5。
3詳情頁使用markdown語法,使用ejs模板來渲染。兼容移動(dòng)端和桌面端
4項(xiàng)目線上部署地址: www.huangchengdu.com 。歡迎訪問。
5整個(gè)項(xiàng)目的配置在config目錄下面??梢愿鶕?jù)自己的情況修改配置。比如端口號(hào)、域名等等。
6這個(gè)項(xiàng)目是我玩node一年以來的結(jié)晶。O(∩_∩)O~。
7整個(gè)項(xiàng)目布局都是less寫的,沒有使用任何第三方框架。
8源碼地址:地址
9測(cè)試賬號(hào) huang 123456。

項(xiàng)目運(yùn)行

//部署,具體細(xì)節(jié)看下面
npm install
npm run build
npm run start
//開發(fā)
npm run dev

關(guān)于nginx代理配置

nginx的配置文件如下:

user www www;
worker_processes 2;#設(shè)置值和CPU核心數(shù)一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志級(jí)別
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虛擬主機(jī)的配置
    server
    {
        listen 80;#監(jiān)聽端口
        server_name www.huangchengdu.com;
    rewrite ^(.*)$  https://$host$1 permanent;  
    }
    server
    {
        listen 443;#監(jiān)聽端口
        server_name www.huangchengdu.com;
    ssl on;
        index index.html index.htm index.php;
        root /usr/local/webserver/nginx/html;#站點(diǎn)目錄
        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啟動(dòng)服務(wù)器。最后需要把.nuxt/dist/(build以后生成的)目錄下面的所有文件和static(我這里是/usr/local/webserver/nginx/static)目錄下的所有文件都放到代理服務(wù)器的靜態(tài)資源根目錄。
這樣才能完整的使用樣式表,如果不使用代理服務(wù)器就不用了。

關(guān)于nuxt

nuxt是vue官方的服務(wù)端渲染框架。猶豫還是比較新穎的東西,坑比較多,我做的過程中也是踩坑不段。
本來還有一些功能想添加進(jìn)去,精力有限暫且搞一個(gè)段落。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容