是的你没看错,并非标题党,之所以说对新手非常友好,那是因为新手写的!
关于linux基本操作命令
- 既然已经要部署上线了,相信你已经有了自己的服务器了,如果你还没有自己的服务器,先去大厂商云去买一个自己的服务器(个人博客,小项目学习的话,服务器建议怎么便宜怎么选则)
- 关于域名: 建议提前选择自己的域名备案,如果你先买了服务器,域名还没买或者备案中也是可以,先先在服务器上把玩的.等域名就绪了,将自己的服务器IP地址,进行解析即可.
- 值得一提的是我刚开始时,在Linux装了nginx及启动后怎么也访问不了! 最后是在云服务商里的 控制面板 > 网络与安全 > 安全组 > 安全组规则 选择对应的访问规则，才算完!
对于刚开始接触服务器的我来说,捣鼓了大大半天!!!
在本地电脑上连接远程服务器(Linux)
- 打开命令行工具,或者编辑器提供的terminal
$ ssh root@ipAddr //ssh命令用于博客,学习用没多大的安全问题,ipAddr是你购买的服务器IP地址
2.连接成功后,我们先来安装会用到的软件吧!
- Nodejs
- nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
- PM2: Node.js Production Process Manager with a built-in Load Balancer.
- nginx: nginx [engine x]是HTTP和反向代理服务器，邮件代理服务器和通用TCP / UDP代理服务器
首先安装nginx
Linux发行版本不同，命令也不同,请自己根据自己的发行版选择安装;
我的是centos,用默认的yum包管理,所以:
$ yum install nignx //安装
$ yum remove //卸载
$ nginx -v //查看当前nginx版本(是否安装成功) nginx version: nginx/1.14.1 ok!
$ nginx //启动nginx
$ nginx -s start //启动nginx
$ nginx -s reload //重新启动nginx
$ nginx -s stop //停止nginx
$ pkll -9 nginx //按名杀死nginx进程
$ nginx -t //查看nginx状态 >>
<< nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
<< nginx: configuration file /etc/nginx/nginx.conf test is successful
1.CoreModule 核心模块
2.EventModule 事件驱动模块
3.HttpCoreModule http内核模块
** 关于nginx防火墙: **
由于我是刚买的服务器所以没有开启防火墙,如果你遇到nginx防火墙的问题,请自己查阅解决一下,几行命令
接下来我们安装nvm: nvm是node版本管理工具
官方提供的 shell 命令
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
或
$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
>> nvm --version
<< 0.35.3(我当前nvm版本)
>> nvm ls-remote
>> nvm install node
>> Downloading and installing node v14.3.0...
Downloading https://nodejs.org/dist/v14.3.0/node-v14.3.0-linux-x64.tar.xz...
#################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.3.0 (npm v6.14.5)
>> nvm ls
>>
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.20.1 (-> N/A)
lts/erbium -> v12.16.2 (-> N/A)
node安装
$ nvm install node
$ node -v //查看node版本
$ npm -v //npm包管理版本
启动nginx后,我们去本地(自己的电脑)里输入,自己的服务器IP地址:xxx.xxx.xxx,看看是否启动&具备提供访问服务能力
安装PM2
$ npm install pm2 -g //注意pm2需要本地(你自己的电脑也得全局安装)
所需安装完
接下来准备部署吧!
首先确保自己已经SSH连接到远程服务器了,其次nginx已经安装启动。
$ cd /etc/nginx/ //切换到ngixn安装配置目录`/`表示根目录出发 (相对 || 绝对路径)
$ ls //list
>>
conf.d fastcgi_params.default nginx.conf uwsgi_params
default.d koi-utf nginx.conf.default uwsgi_params.default
fastcgi.conf koi-win nginx.conf.rpmsave win-utf
fastcgi.conf.default mime.types scgi_params
fastcgi_params mime.types.default scgi_params.default
$ cat nginx.conf //查看nginx.conf > server模块 > include 没有被注释,nginx里 ** # **
查看nginx.conf
- 查看nginx.conf/下 server模块 > include 没有被注释,nginx里
#表示注释
在命令行ls可以查看到,当前目录里有conf.d目录(是目录|文件夹)
$ cd conf.d
$ touch projectName.conf //创建一个你自己项目名的.conf文件
$ vi projectName.conf //用vi(linux系统自带)打开,编辑
首先我们先上线不依赖Node.js的项目吧
projectName.conf文件
server {
listen 80; //(必填可修改)监听
server_name 你的域名(xxx.com); //(必填可修改)你公开访问的备案域名
location / {
root /var/www/porject; //(必填可按自己的喜欢目录存放修改)我将打包的项目放在了此目录文件夹下
index index.html index.htm index.php; //包含的index
}
}
编辑好后:
- 按Esc键
- shift + :
- :wq
1.2.3步走! 一气呵成,保存退出
- :wq!(加上!感叹号是强制保存退出)
$ cd .. //切换到上一层目录下
$ ls
cd /var/www/ //我将项目存放在这里的,你可以根据自己喜欢存放,但是一定要对应projectName.conf里的location/的root 如我的配置是/var/www/porject;
好吧
$ cd /var/www/
$ mkdir projectNmae //创建项目文件夹(你自己的喜好命名)
$ cd projectNmae //我将项目 /dist 文件夹存放与此
梳理一下目录: /根目录下 /var/www/xxx/dist/[index.html(文件),static(文件夹)] static是静态资源;
nginx,最最最最最最最最最基本的配置后应该就按对应的域名,访问项目了(旨在快速,简单,上线)
nginx , pm2 部署 nuxt.js
ssh连接服务器,切换到/根目录下/etc/nginx/conf.d/ 下 **在Linux无论在哪里 cd /**都可以切换到根目录/
cd /etc/nginx/conf.d/
$ touch projectName.conf
$ vi projectName.conf
projectName.conf 配置如下
server {
listen 80;
server_name domain.com; //改成你的域名
location / {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://127.0.0.1:3000; //我的nuxt项目在本地是3000端口
add_header Access-Control-Allow-Origin: *;
proxy_redirect off;
}
}
- 按Esc键
- shift + :
- :wq
1.2.3步走! 一气呵成,保存退出
- :wq!(加上!感叹号是强制保存退出)
================================================================
回到自己当前所开发目录下,创建pm2发布配置文件(不一定是跟目录,但最好是跟目录) 如我:
$ vi deploy.conf.js //跳过touch 命令直接用vi编辑器打开,并编辑后可保存.
module.exports = {
app: [
{
name: 'yoee',
script: 'server/index.js',
env: {
COMMON_VARIABLE: 'true'
},
env_production: {
NODE_ENV: 'production'
}
}
],
deploy: {
production: {
user: 'root', //服务器用户名 我的是root
host: 'xxx.xxx.xxx.xxx', //你的服务器Ip地址
ref: 'origin/master',
repo: 'https://gitee.com/yoee/yoee.git', //gitee||github仓库地址
path: '/var/www/yoee', //发布到服务器的何路径文件夹下?(自喜自修改)
'pre-deploy': 'git fetch --all',
'post-deploy': 'npm install && npm run build && npm start && pm2 startOrRestart deploy.config.js --env production' //我将npm替换成cnpm暂没问题(因为更快,repo配置gitee发布也很快,你懂得)
}
}
}
记得 ctrl+s 保存,提交 gitee || github
还有** package.json **文件里要修改配置scripts字段
package.json 文件
{
"name": "yoee",
"version": "1.0.0",
"description": "proj",
"author": "yoee",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production pm2 start server/index.js", //将node替换成 pm2 start运行接管
"generate": "nuxt generate"
},
配置好后重新git提交到仓库，确保github是最新的项目代码
>
最后
我踩过的坑
因为 .nuxt 项目文件夹在 .gitignore
- 没有被忽略掉,导致我在发布时(失败时)遇到很久很久很久很久很久很久很久很久以前的发布(像是缓存|历史版本).
- 因为自己刚接触服务端,在学习配置是,折腾配置将端口
port多次修改,导致我一个域名下同时监听多个服务器端多个端口,浪费!!!而且,因为不同端口都发布某次学习部署,导致坑 1 成立!
所以:
$ netstat -ntlp //推荐刚学习部署的同学,看看自己当前所用的端口,将占用的kill掉(当心!)
发布命令
- 在项目目录启动terminal:从github仓库拉取代码到服务器。
$ pm2 deploy deploy.conf.js production setup //发布命令，pm2会按我们配置，到github拉取代码
- 将服务器端的代码发布:
$ pm2 deploy deploy.conf.js production
这个过程会让你输入密码(多次，但可配置)
如果以上配置部署失败,请出门右转,继续查学习资料,仅记学习笔记和个人收获...
