阿里云服务器部署 nuxt 项目

1. 远程 SSH 连接 server

基于 server CentOS 8.0 64位,本机 MacOS,推荐使用 FinalShell 或者 CyberDuck 连接。

连接成功,会有以上的信息。

然后需要安装的环境如下:

  • nginx

  • node

  • npm

  • yarn(可选项,如使用 npm 可以不用安装 yarn)安装参考

  • pm2

2. nginx

2.1 安装依赖环境

依次执行:

yum -y install gcc-c++
yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel

2.2 添加用户、组、创建目录

groupadd nginx
useradd -g nginx -d /home/nginx nginx
passwd nginx
mkdir /var/run/nginx
mkdir /var/temp 
mkdir /var/temp/nginx

2.3 下载并解压nginx

版本号可以按喜好替换

cd /opt
wget http://nginx.org/download/nginx-1.16.0.tar.gz
tar -zxvf nginx-1.16.0.tar.gz 

2.4 进入解压文件夹并指定安装路径

cd nginx-1.16.0
./configure --user=nginx --group=nginx --prefix=/usr/local/nginx --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_gzip_static_module --http-client-body-temp-path=/var/temp/nginx/client --http-proxy-temp-path=/var/temp/nginx/proxy --http-fastcgi-temp-path=/var/temp/nginx/fastcgi --http-uwsgi-temp-path=/var/temp/nginx/uwsgi --http-scgi-temp-path=/var/temp/nginx/scgi
make && make install

2.5 设置用户权限及开机启动

  ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx
  cd /etc/rc.d
  sed -i '13a /usr/local/nginx/sbin/nginx' /etc/rc.d/rc.local 
  chmod u+x rc.local

浏览器打开 server ip:


如果不是以上页面,而是 CentOS 页面,说明阿里云的服务在开启,这时需要执行 lsof命令查找进程并一一 kill,然后执行 nginx 命令再刷新页面。页面启动正常就可以进行下一步了。

3. node

3.1 下载Node.js安装包

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz

3.2 解压安装包

tar xvf node-v6.9.5-linux-x64.tar.xz

3.3 创建软链接

ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

3.4 查看版本

node -v
npm -v

3.5 测试

新建项目文件 example.js

cd ~
touch example.js

修改文件,使用 FinalShell 直接打开 example.js 编辑添加如下代码:

const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => { 
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
}); 

server.listen(port, hostname, () => { 
    console.log(`Server running at http://${hostname}:${port}/`);
});

运行:

node ~/example.js &

登录ECS管理控制台,并在ECS实例安全组的入方向添加规则, 放行项目中配置的端口(本示例中端口号为3000)。

访问 http://<ECS实例公网IP地址>:3000

更多细节请移步 部署Node.js环境

4. pm2

npm install -g pm2 这里安装之后需要指定软连接

ln -s /your-server-node_path/bin/pm2 /usr/local/bin/pm2

项目 yarn build 打包,将 .nuxt static package.json nuxt.config.js 等文件/文件夹 copy 至服务器的文件夹 /usr/local/nginx/my-nuxt(此处的项目名称要和下面启动项目名称对应),然后在该目录下执行

yarn install -production
  • 进程守卫

package.json 文件中需要添加以下配置:

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "PORT=3000 nuxt start",  // 这里添加 PORT=3000
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },

修改 /usr/local/nginx/conf/nginx.conf 文件:

# 添加这段配置
upstream nodenuxt {
        server ip_address:3000;
        keepalive 64;
}

# server 配置
server {
        listen 80;
        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxt; #反向代理
        }
    }
# yarn
pm2 start yarn --name "my-nuxt" -- start

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

如果访问不到,可以使用 pm2 logs 命令查看下然后按照提示解决。

5. 绑定域名 & 备案

首先要实名认证,然后等待 2-3 个工作日后填写备案信息,接下来添加域名解析:

  • 阿里云注册域名->到域名管理后台点击解析->添加记录到阿里云公网ip
  • 阿里云服务器后台点击实例->点击更多找到网络和安全组->点击添加安全组配置->添加规则,端口号对应项目设置端口,本人为默认端口80,目的是输入域名不加端口号即可访问。

6. SFTP 连接

SSH File Transfer Protocol,也称 Secret File Transfer Protocol,安全文件传送协议。使用该协议可以实现本地向远程服务器推送工程文件。

以 VS Code 为例:

6.1 安装插件

插件市场搜索 sftp 安装完成调出配置命令,Windows 系统快捷键 CTRL + SHIFT + P,Mac CMD + SHIFT + P,输入 SFTP:config 按回车:

根目录会生成这个文件。

6.2 配置 sftp.json

{
  "name": "My Server",   
  "host": "localhost",  // 改为远程 server ip
  "protocol": "sftp",   
  "port": 22,
  "username": "username",  // 改为远程 server 登录用户名,通常是 root
  "password": "******",  // 服务器登录密码
  "remotePath": "/",   // server 上项目目录地址,比如我的项目是 /usr/local/nginx/ziyu
  "uploadOnSave": true  // 删除这个配置或者 改为 false,否则每次保存就自动上传有点麻烦
}

6.3 上传文件或文件夹:

文件上传右键点击 upload

文件夹上传右键点击 Sync Local -> Remote

参考文章:
Node项目部署到阿里云服务器(ECS),以Nuxt.js服务端渲染项目为例
VS code配置SFTP连接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容