阿里云服务器web应用部署初窥（vue+express部署完整流程）_express vue 子目录

趁着双十一254.92元搞了三年期的服务器，方便自己部署demo、访问接口，记录下部署具体步骤。

本文介绍了node、redis、nginx、mysql、express、vue项目的安装部署，这些除了node外并无耦合关系，可根据个人需求安装。

1、选择服务所在位置，进入实例重置密码、重启实例。

2、本地cmd 链接服务器

ssh root@"ip地址"

     输入密码

3、安装node及express

yum install -y nodejs
配置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装express
cnpm install express-generator -g
安装pm2(可选)
cnpm install pm2 -g
设置pm2开机自启动
pm2 startup systemd 
pm2 save

通过命令行或者winscp等可视化工具，将代码上传到服务器对应目录，依赖包线上cnpm i安装。

开放服务器端口3000，并重启实例（详情可参考本文步骤5）

 

node -v检查安装是否成功

当线上项目启动失败时，也许是依赖包的锅，实在不行从线下拷一份……

4、安装nginx

yum install nginx
# 设置开机自启动
sudo systemctl enable nginx
# 启动nginx
sudo systemctl start nginx
# 查看nginx状态
sudo systemctl status nginx
 
 

 

附nginx常用命令行代码及文件目录

# 启动 nginx
sudo systemctl start nginx
# 关闭 nginx
sudo systemctl stop nginx
# 重启 nginx
sudo systemctl restart nginx
# 修改 nginx 配置后重新加载
sudo systemctl reload nginx
# 设置开机启动 nginx
sudo systemctl enable nginx
# 关闭开机启动 nginx
sudo systemctl disable nginx
# 查看 nginx 状态
sudo systemctl status nginx

5、开放实例8080端口(下文将不再详细描述)

重启实例，通过公网ip访问nginx默认首页

 

ok

6、安装mysql

下载
wget -i -c https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
安装
yum -y install mysql80-community-release-el7-3.noarch.rpm
yum module disable mysql
yum -y install mysql-community-server
 
启动服务
systemctl start  mysqld.service
开机自启
systemctl enable mysqld.service
查看MySQL服务：
systemctl status  mysqld.service

开启3306端口，并重启实例。

查看初始密码

grep "password" /var/log/mysqld.log

输入密码
mysql -uroot -p
修改初始密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '你的密码';
 
创建musql用户
CREATE USER 'admin'@'%' IDENTIFIED BY '密码';
 
允许远程连接
GRANT ALL ON *.* TO 'admin'@'%';
 
 
顺便修改选mysql和node加密方式不一致的问题（不然会报错：
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol request
ed by server; consider upgrading MySQL client）
ALTER USER 'admin'@'%' IDENTIFIED WITH mysql_native_password BY 'Gu19950402@';
立即生效
flush privileges;
 

7、本地链接服务器mysql（以workbench为例）

随后创建一份测试数据库用作测试

8、安装redis

开通6379端口，并重启服务器

下载稳定版本 （记录好安装目录，我的是home/soft/redis-5.0.2）
wget http://download.redis.io/releases/redis-5.0.7.tar.gz
安装依赖
yum install -y gcc
解压
tar -zvxf redis-5.0.7.tar.gz
移动目录
mv /home/soft/redis-5.0.7 /usr/local/redis
编译
cd /usr/local/redis
make
make PREFIX=/usr/local/redis install

 PREFIX= 这个关键字的作用是编译的时候用于指定程序存放的路径。比如我们现在就是指定了redis必须存放在/usr/local/redis目录。假设不添加该关键字Linux会将可执行文件存放在/usr/local/bin目录，

在目录/usr/local/redis 输入下面命令启动redis 

./bin/redis-server& ./redis.conf

ok

修改一些重要配置项

编辑配置文件
vim /usr/local/redis/redis.conf
 
更改
daemonize no
为
daemonize yes
作用是启用守护进程

9、vue项目打包配置、nginx如何部署多项目

一些重要配置项

nginx配置，替换nginx.conf，替换后重启

nginx.conf文件所在位置

location / {
	root         /usr/share/nginx/html;
	try_files $uri $uri/ /index.html;
}
 
location /august_wind { //子目录，对应路径展示八月长风产品网站
    alias alias /home/front/wechat/august_wind;; //子文件目录
	expires  1d;
	index index.html;
	autoindex on;
}
 
location ^~ /api/ { //路径映射，不然会报错304
	proxy_pass http://"ip地址":3000/;
}
location ^~ /dev-api/ {
	proxy_pass http://"ip地址":3000/;
}

多项目时设置子目录同样需要vue路由

路由文件

const router = new VueRouter({
  mode: 'history',
  base: '/august_wind',
  routes
})

vue.config.js文件

添加公共路径
publicPath: '/august_wind',

打开浏览器，输入网址

ok，大功告成。