項(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è)段落。