雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

nuxt.js 初体验及服务端部署全部流程

2018-12-28 分类:前端之旅 / 心路历程 阅读(5959) 评论(0)

安装流程

第一步安装: npx create-nuxt-app <项目名>,

确保安装了npx(npx在NPM版本5.2.0默认安装了):

然后一路回车,安装完成之后执行 npm run dev

我们主要记录部署的流程

首先, 我们先把本地项目编译一次, 执行 npm run build, 打包之后的文件在 .nuxt 目录里(注意: 如果是在mac下, .文件默认是隐藏的)

编译之后选择 文件夹打包,上传到服务器,文件夹及文件依次是:

1
2
3
4
nuxt.config.js
package.json
server
static

打包成为 nuxt.tar.gz文件, 然后通过ftp等工具上传到liunx服务器,

在服务器执行: tar -zxvf nuxt.tar.gz 解压

解压完成之后, 安装依赖, npm install

安装完成之后, 我们启动项目, 执行 npm run start,

接下来我们先配置一下nginx, 使用反向代理来实现直接使用域名访问

我们新建一个nginx配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
upstream nuxtserver1 {
    server 0.0.0.0:3000; // 这里是代理的地址, 默认vue启动的是127.0.0.1:3000
}
server
{
    // 我们需要监听80端口, 不然需要在域名后面带上端口号才能访问, 默认的80端口不需要写端口号,
    listen 80;
    server_name nuxt.he29.com; //我们的域名,. 需要先把域名解析到本机器,
location / {
proxy_pass   http://nuxtserver1; 这里是我们的反向代理
        index  index.html index.htm;
}
    access_log  /www/wwwlogs/nuxt.he29.com.log; //记录log
}

然后在nginx 主配置文件里引入, 重启nginx, 注意不能关闭之前启动的 npm run start

然后使用 nuxt.he29.com 应该就可以访问到了

20181228161354

 

但是, 做完这些, 我们还需要使用 pm2 来让我们的项目在后台一直运行, 不然我们关闭了终端, 我们的服务停了也就无法访问了

首先我们全局安装pm2, 安装完成之后使用pm2, 编写配置文件,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "apps": {
    "name": "myidea",
    "script": "npm run start",
    "watch": [
      ".nuxt"
    ],
    "ignore_watch": [
      "node_modules"
    ],
    "watch_options": {
      "persistent"    : true,
      "ignoreInitial" : true
    }
  }
}

然后 启动我们的项目

1
2
3
4
5
6
7
8
9
10
[PM2] Applying action restartProcessId on app [npm](ids: 0)
[PM2] [npm](0) ✓
[PM2] Process successfully started
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem      │ user │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────┼──────────┤
│ npm      │ 0  │ fork │ 27326 │ online │ 16      │ 0s     │ 49% │ 9.9 MB   │ root │ disabled │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────┴──────────┘
Use `pm2 show <id|name>` to get more details about an app
[root@instance_439b09 server]#

这样, 我们的项目也就全部启动起来了

分享到:更多 ()

相关推荐

  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
  • vue工程项目动态加载umd.js实践
  • 使用 shell 检测目标服务器是否异常
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图