Travis CI 部署遇到的问题? 部署怎么启动 nuxt服务

更新日期: 2019-02-23阅读: 2.8k标签: nuxt

最近研究nuxt服务端渲染的时候,看到nuxt的几种部署方式,因为nuxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。然后就走上了研究TravisCI的不归路。


Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?

在研究nuxt的这一篇文章 《如何部署至GitHub Pages?》的时候,所有操作都按照文章提示来,发现怎么部署都失败,然后仔细看自己页面资源引用的路径,并没有实现文章中的router base 的路径配置。

router: {
    base: '/<repository-name>/'
}

然后自己反复上传验证,终于发现问题。在官网给出的TravisCI配置中:

language: node_js
node_js:
  - "8"

cache:
  directories:
    - "node_modules"

branches:
  only:
  - master

install:
  - npm install
  - npm run generate # 这个需要改为npm run generate:gh-pages

script:
  - echo "Skipping tests"

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_ACCESS_TOKEN  # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
  target-branch: gh-pages
  local-dir: dist
  on:
    branch: master

需需要把install中的 npm run generate 改为npm run generate:gh-pages,这样就可以走gh-page分支的打包了。不知道是不是还有别的解决方法,刚接触也不是特别了解。


Travis CI 如何部署服务器?

可以参考这篇文章Travis CI 自动化部署博客


Travis CI 部署服务器如何实现免密登录?

搞完GitHub Pages静态部署,然后就想部署服务端,毕竟接触nuxt的目的就是实现服务端渲染。
然后找了一个比较坑的文章... 每次Travis部署后,都要求输入一个密码。卡在了免密登录的地方卡了很久很久... 在此多谢@X1nFLY 的帮忙,很耐心的帮我解决了问题。

其实免密登录跟trvais并没有什么关系,原理就是私钥公钥的加密解密(有兴趣可以自行去搜索),只要你本地 ssh连接实现免密登录,那Travis部署也可以的。

需要在终端输入:

ssh-copy-id username@your-server-ip

ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized_keys的权利,这时候只要你终端输入:

ssh username@your-server-ip

再次连接就不用再输入密码啦~


Travis CI 部署怎么启动 nuxt服务,node服务?

下面到了最关键的时刻,部署成功后after_success:怎么处理?

对于一个前端(没怎么接触过后台)来说,确实一脸懵逼,要操作 一些常用Linux命令。
下面我就总结几个我碰到的:

部署nuxt静态资源到服务器。

因为nuxt静态资源是打包到 /dist 文件夹下的,所以我们只需要把/dist文件夹 拷贝到服务端对应的文件夹即可。

after_success:
- rsync -az --delete ./dist/* root@123.123.123.123:/data/html/nuxt # copy dist文件夹下的所有文件

部署nuxt服务端渲染应用到服务器。

打包对应文件夹是.nuxt 文件,但是需要服务端启动服务,所以需要安装各种依赖以及启动配置。

所所以需要将 .nuxt nuxt.config.js package.json static 文件或文件夹都拷贝到服务器上,并对其安装依赖,启动服务。

after_success:
- rsync -az --delete .nuxt nuxt.config.js package.json root@47.99.102.212:/data/ssr
- ssh root@123.123.123.123 'cd /data/ssr/ && npm install && npm run start'

部署node应用服务器。

after_success:
- ssh root@123.123.123.123 'cd /data/node/ && git pull && npm install && npm run prd'

来自:https://segmentfault.com/a/1190000018254440


链接: https://fly63.com/article/detial/2094

nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具

一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。

nuxt.js中添加统计代码,添加百度统计,或者google的统计

在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。

nuxt.js中全局变量的设定_nuxt如何实现全局初始化功能

在组件和布局中需要使用到相同的数据,改数据需要在nuxt初始化时候获取,而且仅从服务器端获取一次即可。那么该如何实现nux全局初始化功能呢?可以通过vuex来管理全局的一个状态的数据,Nuxt.js 的渲染流程,最先调用的即是 nuxtServerInit 方法。

使用Nuxt.js创建服务器端渲染的Vue.js应用程序

Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node

Nuxt.js部署应用的方式

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

服务端预渲染之Nuxt

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据

nuxt框架中对vuex进行模块化设置

Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例

Nuxt.js引用谷歌广告代码

最近另一个网站的谷歌联盟申请下来了,记录一下Nuxt.js如何引用谷歌广告的JS代码,当初找了好久。只配置nuxt.config.js文件就可以,下面贴出来。

Webstorm环境使用nuxt.js做开发,@ 和 ~ 别名配置

webstorm 设置@和~别名,有助于代码查看和跳转.在项目下创建一个webpack.config.js,内容如下;设置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!