nuxt.js项目部署全过程(ubuntu+nginx+node+pm2)

全篇比较啰嗦，可以酌情选择对自己有帮助的看。

1.购买一个服务器

有服务器的可以自行跳过哈。

有闲置电脑的话也可以，具体的可以自己找找看，我这篇主要说网上的云服务器。

不过这几天阿里云有活动，大学生免费送半年ECS服务器，前提是原来没有ECS服务器，如果原来有轻量应用服务器的话也是可以再领的(正好到期了，不用续费了哈哈哈)，

活动网址：https://developer.aliyun.com/adc/student/

如果不是学生的话，只能自己购买了，购买的话基本是傻瓜式的，不解释了。可以自己从任何地方买。

阿里云ECS服务器购买：https://www.aliyun.com/product/ecs

系统的话本篇是Ubuntu 16.04.6 ,centos也行，大同小异都是Linux。不过如果你是初学者，最好和我使用一样的，因为因为发行版本不同而导致的差异可能导致运行某些东西失败，找问题要找好久。windows server不推荐了，企业用的多，小服务器跑windows server比较费劲。

具体区别：https://www.linuxprobe.com/ubuntu-comparison-centos.html

1.1购买域名

域名可买可不买，就是方便记忆你的网址，没有什么实质的用处。

我选择的万网，地址给你们，自己看着挑，反正不是很贵。

万网:https://wanwang.aliyun.com/

也是阿里系的，所以和阿里云的主机配置起来相对方便一点。购买好了在你的DNS域名解析的网站上将你的域名绑定相应的服务器ip即可实现输入域名对接ip。

dns域名解析服务：https://dns.console.aliyun.com/

2.服务器配置

2.1 连接服务器

首先如果你购买了云服务器的话装完系统的话，需要用本地机器进行连接。

首先打开你的终端或者cmd之类的，用ssh命令连接你的服务器。

$ ssh root@123.123.123.123

123.123.123.123就是你的服务器的公网Ip,怎么找呢？

阿里云举例首先登陆，然后找到控制台，如果你之前用过ECS服务器的话，在你最近使用过的产品下会有一个 云服务ECS的标签，点击它你就可以看到你的云服务器实例。在ip地址栏就有他的公网ip和私网Ip了。

那么有人就会问了，公网Ip和私网ip有什么区别呢？大体来说就是你要是通过互联网来访问某台主机，只能用公网ip，私网只能用于局域网内。

等待片刻会让你输入password，直接输入在你配置服务器时候的密码即可，输入时并不会显示你输入的啥，表面上是没动静的，所以你只管输入就行了，输入完了回车，即可进入服务器

2.2 ssh设置

当然你可以选择新建用户，然后直接用这个用户登录(ssh 你的用户@公网ip ，之前用root登录是因为现在服务器里只有root用户)，可能涉及到一些安全问题，不过作为个人服务器不设置也行，所以不叙述了。

如果对安全有需要的同志们看一下阮一峰的那篇博客

<Linux服务器的初步配置流程>:http://www.ruanyifeng.com/blog/2014/03/server_setup.html

不过每次输入密码真的挺麻烦的，所以可以用SSH秘钥来免登陆，这里只叙述mac系统的，windows的不太了解。如果你不嫌麻烦同时对安全性没有什么要求的话这一步一样可以忽略。

首先你可以在本机终端中输入ssh-keygen命令来生成公钥和私钥
```
$ ssh-keygen -C "你想在这输什么都行，这就是一段描述，一般套路是你的邮箱" 
```
你要是不喜欢的话甚至也可以不加-C ，你在别的教程里看的-t rsa也可以不加，因为不加也是生成rsa格式的。
接下来让你输入文件名，这步可以不输入，不输入之后默认的文件名是id_rsa和id_rsa.pub
接下来让你输入密码，同样可以不输入。
接下来你就会看到，你的用户目录里会出现.ssh的文件夹（默认隐藏了，需要command+shift+句号键才可以显示），然后你会看到这个文件夹里有id_rsa和id_rsa.pub
登录服务器，然后在你的用户目录里新建一个.ssh的文件夹，然后新建一个authorized_keys的文件，默认你现在正在用root用户。
```
$ cd /root
$ mkdir .ssh
$ vim authorized_keys
```
然后进入vim的界面，还记得你的id_rsa.pub吗？在本地主机，你随便用什么打开他(例如sublime)，把这个文件的内容复制，然后粘贴到服务器的vim里，然后嗯ESC键退出编辑模式，然后用大写的ZZ可以保存退出文件，或者你也可以输入:wq来保存退出文件。

讲的比较通俗，你也可以用ssh-copy-id或者cat ~/.ssh/id_rsa.pub | ssh bill@128.199.209.242 'mkdir -p .ssh && cat - >> ~/.ssh/authorized_keys'这样看起来比较高端的操作来执行，但是我估计会用的不会看我这篇博客。

然后，重启SSHD。

$ sudo service ssh restart
或者
$ sudo /etc/init.d/ssh restart

接下来退出你的服务器，输入exit或者logout或者直接关闭终端都可以。
接下来再用ssh命令登录你的服务器，你会发现不用输密码了。

2.3 配置环境

用apt-get install安装常用的工具，具体不解释了，可以都选择装，想深入了解的可以百度一下下面都是些什么东西。

$ sudo apt-get install vim openssl build-essential libssl-dev wget curl git

接下来用wget安装nvm，nvm是node.js一个node版本管理工具，可以安装也可以切换来切换去的

nvm ls-remote：列出所有可以安装的node版本号
nvm install v12.16.1：安装指定版本号的node
nvm use v12.16.1：切换node的版本，这个是全局的
nvm current：当前node版本
nvm ls：列出所有已经安装的node版本

所以可以先用nvm ls-remote来检查一下最新的版本，推荐安装最新的LTS版本，然后用nvm install v12.16.1来进行安装，因为用的国外的网，下载可能有些慢，需要耐心等待。
然后你就可以用熟悉的npm安装各种各样的工具了，直接按照下面的装就好了。
```
$ npm i pm2 webpack vue-cli -g
```
接下来就是安装nginx
```
$ sudo apt-get install nginx 
```
ngnix是啥玩意待会再说，你先安你的。
如果你的项目包含后端代码，再打包好了需要安装mongdb,redis或者mysql的之类的数据库服务的话，可以自行去百度。这里不再赘述了。

3.nginx配置

3.1简述原理

简述一下nginx的原理，如果你直接通过浏览器访问你的公网Ip或者域名的话，不会出现任何东西，因为你什么东西都没往上搁。

如果你放了个vue项目，在服务器上跑，你知道如果这个项目在本地上跑，你可以通过127.0.0.1:3000或者localhost:3000来访问你这个项目。

但是如果你把项目放到服务器上跑，我怎么通过127.0.0.1这个地址来访问服务器呢？答案是不能，因为这是个回环ip地址，只能指到本机，而本机没有运行这个项目。

那么我怎么来访问服务器上的项目呢？所以nginx就来了，他能通过反向代理，将你输入的123.123.123.123:80地址指向他本机运行的127.0.0.1:3000。这样你只需要在浏览器上输入123.123.123.123，然后就会出现你刚刚在服务器上跑的vue项目。

3.2配置开始

我们进入/etc/nginx/sites-enabled/中,用vim编辑default文件

$ cd /etc/nginx/sites-enabled/
$ vim default

然后你把你能看到的不带#号注释的都删掉，换成我下面的东西，然后你就可以执行你的默认3000端口的代码了，其他的配置项很多，我只给你能简单运行的代码哈，其他的自行查阅文档或者看别的博客，我就不展开了。

nginx 中文文档：https://www.nginx.cn/doc/

upstream nuxt{
        server localhost:3000;

}
server {
        listen 80;
        server_name _;

       location / {
            proxy_pass http://nuxt;
        }
    }

然后执行sudo nginx -t看是否语法或者配置有无硬伤，然后如果显示successful的话，就执行sudo nginx -s reload 重启nginx服务。这样最简单的代理就完事了。

4.打包上传运行项目

4.1打包上传

首先如果你的nuxt.js项目包含后端的话，而且你请求的地址是类似this.$axios.post("/message/upload",{})这样的话，要先把plugin目录下的axios.js 配置一下，保证在服务器上运行的时候发送的地址正确。

export default function({ $axios, redirect }) {
  $axios.setBaseURL("http://公网ip");
}

并且保证在nuxt.config.js上有标注用到这个pulgin

module.exports ={
  
  // ...
  
  plugins: ["@/plugins/element-ui", "@/plugins/axios"]
  
  // ...
  
}

然后我们运行npm run build 然后会自动给我们打包好相应的文件，我们需要复制到服务器的是

.nuxt
package-lock.json // 如果有的话
package.json
nuxt.config.json
static
server // 如果你的项目中有后端的话

然后按道理将他们复制进服务器的/www/项目名文件夹内

复制步骤可以通过forklift这样的客户端或者sftp，lrzsz命令来操作。

不赘述了，给个博客自行研究

三种方式实现Linux的文件上传下载:https://blog.csdn.net/weixin_37490221/article/details/80844825

我的操作方法就是直接下载一个forklift，然后通过command+k来进行与服务器sftp链接，一拖一拽就行了。比较方便。

然后进入我们刚才在服务器新建的/www/项目名中，执行npm install安装依赖即可。然后我们待会启动项目。

4.2 pm2 守护进程

服务器嘛，当然要一直跑，如果偶遇崩溃啥的在上面跑进程的就中断了，所以需要pm2这样的程序来守护你所执行的进程，如果遇到崩溃可以自动重新进行重启。而且这个玩意可以再不用配置的情况下启动多进程，同时运行注入mongdb,redis和你的web应用。

刚才再配置环境时已经安装了pm2，我们还是进入我们刚才在服务器新建的/www/项目名中,执行

$ pm2 start npm --name "my-nuxt" -- run start

另附一些常用的pm2操作

查看所用已启动进程：

$ pm2 list

重启某一个进程：

$ pm2 restart XXX

停止某一个进程：

$ pm2 stop XXX

删除某一个进程：

$ pm2 delete XXX

然后我们就能愉快地打开浏览器访问我们的网站了。

posted @ 2020-03-02 02:34 wang999 阅读(2399) 评论(0) 编辑收藏举报

刷新页面返回顶部