lincenying / Mmf Blog Vue2 Ssr
Licence: mit
mmf-blog-vue2 ssr(The service side rendering)
Stars: ✭ 174
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Mmf Blog Vue2 Ssr
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+648.28%)
Mutual labels: vuex, ssr, vue-router, server-side-rendering
163music
🎵163 music web app built with Vue 2.6, server side render, webpack 4
Stars: ✭ 139 (-20.11%)
Mutual labels: express, vuex, vue-router, server-side-rendering
Koa Vue Ssr Template
This template built with vue 2.x, vue-router & vuex & webpack3 with server-side rendering by koa
Stars: ✭ 53 (-69.54%)
Mutual labels: vuex, ssr, vue-router
Vue Studymaps
使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
Stars: ✭ 71 (-59.2%)
Mutual labels: express, vuex, vue-router
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-50.57%)
Mutual labels: express, ssr, server-side-rendering
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (+394.83%)
Mutual labels: express, vuex, vue-router
Nuxt.js
The Intuitive Vue(2) Framework
Stars: ✭ 38,986 (+22305.75%)
Mutual labels: vuex, ssr, vue-router
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-68.97%)
Mutual labels: vuex, ssr, vue-router
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-32.76%)
Mutual labels: express, ssr, server-side-rendering
Surmon.me
🆒 My personal website and blog, powered by @vuejs (3)
Stars: ✭ 1,767 (+915.52%)
Mutual labels: vuex, ssr, server-side-rendering
Vue Meteor
🌠 Vue first-class integration in Meteor
Stars: ✭ 893 (+413.22%)
Mutual labels: vuex, ssr, vue-router
Vue Chat
👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。
Stars: ✭ 887 (+409.77%)
Mutual labels: express, vuex, vue-router
Vue Chatroom
Vue全家桶 + socket.io + express 搭建的聊天室+ 智能问答助手
Stars: ✭ 27 (-84.48%)
Mutual labels: express, vuex, vue-router
Vue 163 Music
【停止维护】网易云音乐web版,支持PC端常用功能,localStorage保存播放列表
Stars: ✭ 788 (+352.87%)
Mutual labels: express, vuex, vue-router
Hackernews
HackerNews clone built with Nuxt.js
Stars: ✭ 758 (+335.63%)
Mutual labels: vuex, ssr, vue-router
Nuxt Firebase Sns Example
Nuxt v2 & Firebase(Hosting / Functions SSR / Firestore), Google Auth SNS Example.
Stars: ✭ 485 (+178.74%)
Mutual labels: vuex, ssr, server-side-rendering
Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+305.17%)
Mutual labels: vuex, ssr, vue-router
Vue2 Shop
A shop developed with Vue2 + Vue-router + Axios + Vuex + Node + Express + MongoDB + Webpack
Stars: ✭ 103 (-40.8%)
Mutual labels: express, vuex, vue-router
Vue Shoppingcart
ShoppingCart (Ecommerce) 🛒 Application using Vuejs, + Node.js + Express + MongoDB 🚀🤘
Stars: ✭ 141 (-18.97%)
Mutual labels: express, vuex, vue-router
@[toc]
1. 首先你得有台服务器
2. 推荐安装 linux 系统
本文以 CentOS 7.2 为例
3. 更换 yum 为国内镜像
- 备份你的原镜像文件,以免出错后可以恢复。
# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
- 下载新的CentOS-Base.repo 到/etc/yum.repos.d/
// CentOS 5
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-5.repo
// CentOS 6
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-6.repo
// CentOS 7
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo
// CentOS 8
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-8.repo
- 生成缓存
# yum makecache
4. 安装 Nodejs
方法1: 用 yum 安装
// nodejs 8.x
# curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
// ...
// nodejs 12.x
# curl --silent --location https://rpm.nodesource.com/setup_12.x | bash -
// ...
// nodejs 15.x
# curl --silent --location https://rpm.nodesource.com/setup_15.x | bash -
具体所有版本见:
https://github.com/nodesource/distributions/tree/master/rpm
根据自己需要安装的 nodejs 版本, 选一个命令执行
开始安装: yum install -y nodejs
测试是否成功: node -v
, 如果出现对应的版本号, 则安装成功
方法2:
// 1. 下载 nodejs
# cd ~
# wget https://nodejs.org/dist/v12.14.0/node-v12.14.0-linux-x64.tar.gz
// 其他版本: https://nodejs.org/dist/v(版本号)/node-v(版本号)-linux-x64.tar.gz
// https://nodejs.org/dist/ 可以看到所有版本
// 2. 解压
# tar -xvf node-v12.4.0-linux-x64.tar.xz
// 3. 创建软链结
# ln -s /root/node-v12.4.0-linux-x64/bin/node /usr/bin/node
# ln -s /root/node-v12.4.0-linux-x64/bin/npm /usr/bin/npm
# ln -s /root/node-v12.4.0-linux-x64/bin/node /usr/local/bin/node
# ln -s /root/node-v12.4.0-linux-x64/bin/npm /usr/local/bin/npm
测试是否成功: node -v
, 如果出现对应的版本号, 则安装成功
5. 安装 nginx
- 添加 Nginx 到 yum 源
# sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
其他源地址见: http://nginx.org/packages/ centOS7 原地址: http://nginx.org/packages/centos/7/x86_64/RPMS/
- 安装 Nginx
# sudo yum install -y nginx
- 启动 Nginx
# sudo systemctl start nginx.service
- 开机启动 Nginx
# sudo systemctl enable nginx.service
- Nginx 配置信息
// 网站默认站点配置
# vi /etc/nginx/conf.d/default.conf
// 自定义 Nginx 站点配置文件存放目录
# vi /etc/nginx/conf.d/
// Nginx 全局配置
# vi /etc/nginx/nginx.conf
6. 安装 git
方法一、yum 安装
# yum install git
通过yum方式安装,版本比较旧,CentOS 7.2上安装好是1.8版。如果想安装最新版或其他版本,需要使用方法二或三。
方法二、第三方仓库安装方式(IUS)
# curl https://setup.ius.io | sh
// 卸载老版本
# yum remove -y git
// 安装新版本
yum -y install git2u
方法三、源码包安装
- 安装依赖包
# yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
# yum install gcc perl-ExtUtils-MakeMaker
- 卸载旧的git版本(如果之前有安装rpm包)
# yum remove git
- 下载&解压
# cd /usr/src
# wget https://github.com/git/git/archive/v2.24.1.tar.gz
# tar -zxvf v2.24.1.tar.gz
或到 https://github.com/git/git/releases 选择一个版本 4. 编译安装
# cd v2.24.1
# make prefix=/usr/local/git all
# make prefix=/usr/local/git install
# echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/bashrc
# source /etc/bashrc
- 检查git版本
# git --version
// git version 2.24.1
7. 安装 mongoDB
# vi /etc/yum.repos.d/mongodb-org-3.2.repo // 3.x
# vi /etc/yum.repos.d/mongodb-org-4.0.repo // 4.x
写入以下内容
// 3.x
[mongodb-org-3.2]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.2/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.2.asc
// 4.x
[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc
保存并退出 开始安装:
# yum install -y mongodb-org
配置文件:/etc/mongod.conf
数据文件:/var/lib/mongo
日志文件:/var/log/mongodb
相关命令:
// 启动
# service mongod start
// 停止
# service mongod stop
// 重启
# service mongod restart
// 增加开机启动
# chkconfig mongod on
8. api 服务器
vue2 ssr 不管是服务端还是浏览器端, 都是通过 api 来获取数据的, 所以我们需要先搭 api 服务器 安装 pm2, 让 nodejs 服务可以在后台运行
npm install -g pm2
从 github 克隆一个项目
# cd /home
# mkdir web
# cd web
# git clone https://github.com/lincenying/mmf-blog-api-v2.git
# cd mmf-blog-api-v2
# yarn
# pm2 start ./bin/www
这样, api 服务器就起来了
9. SSR 服务器
# cd /home/web
# git clone https://github.com/lincenying/mmf-blog-vue2-pwa-ssr.git
# cd mmf-blog-vue2-pwa-ssr
# yarn
构建 vue2 项目
# yarn build
启动服务
# pm2 start yarn -- ssr:start
10. 利用 nginx 反向代理来绑定域名
# vi /etc/nginx/conf.d/ssr.conf
写入以下内容:
server {
listen 80;
server_name xxxx.com www.xxxx.com; // 你的域名
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://127.0.0.1:8080; // 代理到 nodejs 网站服务器
}
}
保存并退出 重新加载 nginx
nginx -t // 测试 nginx 配置文件
nginx -s reload
到此, 基本配就结束了...
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].