原创
从零到一部署前端项目
使用 linux 命令 node -v 查看 nodejs 是否安装,如果报 Command 'node' not found，说明nodejs并没有安装(这里说明一下，nodejs 在 ubuntu 下默认没有安装)
安装 nodejs,这里我使用的是 nodejs v12.14 版本
我没有使用 sudo apt install nodejs,如果使用这个命令安装nodejs,这样安装的版本比较老,所以我没有使用这种方法
bash
123
# 执行下面2行命令安装nodejs
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs
安装包管理器 yarn
bash
12345
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
安装完成后我们使用熟知的命令进行查看
bash
123456
node -v
# v12.14.0
npm -v
# 6.13.4
yarn -v
# 1.21.1
安装 mongo
bash
12345678910111213141516
# 导入系统配置的公钥
wget -qO-https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -
# 成功后返回 OK
# 为MongoDB创建一个列表文件
echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list
# 重新加载本地软件库
sudo apt-get update
# 安装 mongo
sudo apt-get install -y mongodb-org
# 启动 mongo 服务
sudo service mongod start
克隆项目
bash
12345678910111213141516
# 我的项目放在 /srv/express-server 文件夹下
# cd 到 /srv 目录下
cd /srv
# 创建 express-server 文件夹(需要权限才能创建这里我加了 sudo )
sudo mkdir express-server
# 克隆项目
git clone https://github.com/your_name/your_project.git
# 安装依赖包
yarn or npm i
# 运行项目
yarn pm2
安装 nginx
bash
12
sudo apt-get install nginx
# 默认会安装到 /etc/nginx 目录下
安装完成后访问域名或者 ip地址,出现
wellcome to nginx表示安装好了
nginx 配置
可以直接在 nginx.conf 中 http 同级下增加 server 模块,这里我使用了二级域名,接口被抽离到一个单独的二级域名中
编辑nginx.conf配置
bash
1
vi /etc/nginx.conf
在http中中编写下面3个server配置
bash
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
# 前端展示网站
server {
# SSL 访问端口号为 443
listen 443 ssl http2;
# 绑定证书的域名
server_name www.zhangwurui.cn;
# 证书文件名称
ssl_certificate /etc/nginx/ssl/zhangwurui.cn_bundle.crt;
# 私钥文件名称
ssl_certificate_key /etc/nginx/ssl/zhangwurui.cn.key;
ssl_session_timeout 5m;
# 请按照以下协议配置
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
# 请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location / {
root /srv/web;
index index.html index.htm;
# 目录不存在则执行index.html
try_files $uri $uri/ /index.html;
}
}
# 后台管理
server {
# SSL 访问端口号为 443
listen 443 ssl http2;
# 绑定证书的域名
server_name admin.zhangwurui.cn;
# 证书文件名称
ssl_certificate /etc/nginx/ssl/admin.zhangwurui.cn_bundle.crt;
# 私钥文件名称
ssl_certificate_key /etc/nginx/ssl/admin.zhangwurui.cn.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location / {
root /etc/nginx/admin;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
# 服务端接口
server {
# SSL 访问端口号为 443
listen 443 ssl http2;
# 绑定证书的域名
server_name api.zhangwurui.cn;
# 证书文件名称
ssl_certificate /etc/nginx/ssl/api.zhangwurui.cn_bundle.crt;
# 私钥文件名称
ssl_certificate_key /etc/nginx/ssl/api.zhangwurui.cn.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://127.0.0.1:5000;
}
}
重启
bash
1
service nginx restart
这样一个项目部署就完成了😀
现在呢我有一个问题,如果我们每多一个项目就需要在这个配置文件中多写一样配置,当配置的多了会造成混乱
我们仔细看看nginx.conf配置文件,,发现 http 中有这样 2 行代码,我们可以每多一个项目就在 conf.d 文件夹中增加一个配置文件,这样就会各自独立,也方便日后维护
bash
1234567
http {
# ...
include /etc/nginx/conf.d/*.conf;
# 包含了conf.d中所有以.conf结尾的配置文件
include /etc/nginx/sites-enabled/*;
}
我们的项目有前端 vue 项目,后台 vue 项目和后端服务接口,我们需要把 3 个项目各自抽离到各自的配置文件
bash
1234567
# cd 到目录
cd /etc/nginx/conf.d
# 创建.conf配置文件
sudo touch admin.conf web.conf api.conf
# 用 vi 打开 .conf,我们把 nginx.conf 配置文件中的各个server模块抽离到各自的配置文件中admin.conf, web.conf 和 api.conf
再次执行 service nginx restart ,大功告成
期待你的捷足先登