服务器ssr进程启动怎么运行,要SSR? NUXT项目从初始化到部署服务器流程全记录

首先,简单介绍一下, nuxt.js 是什么

Nuxt.js 是一个 Vue.js的SSR通用框架，最常用的就是用来作SSR(服务器端渲染)。

首先说下 SSR，最近很热的词，意为 Server Side Rendering(服务端渲染)，目的是为了解决单页面应用的 SEO 优化 的问题，对于普通的一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，在国内, 百度/搜狗/等等的搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息(谷歌可以抓取vue等框架信息)。这也就是我们使用 nuxt.js 的主要原因,

目前常见的SSR开源框架(方式)有三个:

今天我们主要讲讲目前最成熟, 文档最详细, 拥有大量问题解决方案的nuxt.js

nuxt.js 优点:

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES6/ES7 语法支持

打包和压缩 JS 和 CSS

HTML头部标签管理

本地开发支持热加载

集成ESLint

支持各种样式预处理器： SASS、LESS、 Stylus等

1.安装与初始化

脚手架安装成功后, yarn create nuxt-app 创建一个项目,

之后开始选择配置:

选择完成后自动开始安装!

🎉 Successfully created project nuxt.js

To get started:

cd nuxt.js

yarn dev

To build & start for production:

cd nuxt.js

yarn build

yarn start

✨ Done in 175.37s.

1

2

3

4

5

6

7

8

9

🎉Successfullycreatedprojectnuxt.js

Togetstarted:

cdnuxt.js

yarndev

Tobuild&startforproduction:

cdnuxt.js

yarnbuild

yarnstart

✨Donein175.37s.

2.启动项目

根据上述提示启动即可!

3. 打包编译, 怎么把项目部署到服务器

首先我们build之后, 拷贝

.nuxt

nuxt.config.js

package.json

这三个文件到服务器即可

拷贝到服务器后, 首先安装依赖, cnpm install

安装成功后, 执行 npm run start

如果没有错误, 会启动项目, 和本地启动一样, 其实这样我们就可以访问了,

开启 liunx 服务器的内外防火墙端口 , 然后浏览器直接访问: 你的 ip:端口号

4. 配置域名访问

当然只能带端口访问肯定不是我们想要的结果, 那么我们就需要配置 域名, 域名解析到服务端这些流程就不说了,

我们找到nginx的配置文件, 在 http{}模块里面新增:

upstream vrserver {

server 0.0.0.0:3356;

}

1

2

3

upstreamvrserver{

server0.0.0.0:3356;

}

其中ip地址写: 0.0.0.0:端口号

之后再新建一组 server{} ;正常nginx配置就不描述了,

比如我要配置成功: http:xxxx.com/v2/ 作为访问地址, 那就在 xxx.com的nginx 里面新建

location /v2/ {

proxy_pass http://vrserver;

proxy_set_header Origin '';

index index.html index.htm;

}

1

2

3

4

5

location/v2/{

proxy_passhttp://vrserver;

proxy_set_headerOrigin'';

indexindex.htmlindex.htm;

}

新建成功后, 重启nginx, 然后访问 http:xxxx.com/v2/ 就可以访问到我们的服务了

5. 怎么让我们的 nuxt.js服务一直启动

现在如果我们关闭终端, 那服务就关闭了, 接下来我们安装 pm2, 让服务在后台一直运行

然后新建一个 pm2.config.json

{

"apps": {

"name": "vr-sever",

"script": "npm run start",

"ignore_watch": [

"node_modules"

]

}

}

1

2

3

4

5

6

7

8

9

{

"apps":{

"name":"vr-sever",

"script":"npm run start",

"ignore_watch":[

"node_modules"

]

}

}

简单配置即可, 然后我们启动: pm2 start pm2.config.json

6 其他问题

如何配置https

如果让代码修改后自动重启

7.项目体验

目前芊云全景使用的是 nuxt.js 的服务, 具体体验请浏览:  https://vr.he29.com/v3/