部署一个前后端分离的项目

761 阅读8分钟

windows系统安装 Ubuntu

进入Microsoft Store 搜索 Linux

安装完成后,进入“控制面板” 点击这里


勾选“适用于Linux的Windows子系统”


Ubuntu系统的设置

  系统启动后会先设置用户名和密码,注意:密码在输入过程中不会有任何显示,实际已经输入成功,输入完成后回车即可

  随后设置root用户的密码。最好是:数字及大小写字母组合

Linux系统的使用命令

  • cd / 进入根目录
  • windows系统磁盘挂载在 /mnt/ 目录下
  • cd /mnt/ 然后ll 一下可以看到挂载的磁盘
  • 进入.ssh文件夹:cd ~/.ssh
  • netstat -ntlp //查看当前所有tcp端口
  • kill -9 PID 杀进程

将.pem文件拷贝进 .ssh文件夹下
cp /mnt/d/xxx.pem /home/dylanlv/.ssh

连接实例
ssh -i [.pem私钥文件在本地机上的存储路径] root@[公网IP地址]
ssh -i ~/.ssh/ecs.pem root@10.10.xx.xxx


安装docker

1、apt升级

sudo apt-get update

2、添加相关软件包

sudo apt-get install \
apt-transport-https \
ca-certificates \
curl \
software-properties-common

3、下载软件包的合法性,需要添加软件源的 GPG 秘钥

curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -

4、source.list 中添加 Docker 软件源

sudo add-apt-repository \
"deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu \
$(lsb_release -cs) \
stable"

5、安装 Docker CE

sudo apt-get update
sudo apt-get install docker-ce

6、启动 Docker CE

# 添加docker服务
sudo systemctl enable docker

# 启动docker
sudo systemctl start docker

7、建立 docker 用户组(附加、可以不用)

# root权限比较高
# 如果是个人服务器,只需要用root的话,这一步可以跳过
sudo groupadd docker
sudo usermod -aG docker $USER

8、 Helloworld 测试

docker run hello-world

9、镜像加速

# 加入微软云和七牛云
# 进入daemon.json文件,进行编辑
vi /etc/docker/daemon.json

# 将以下内容弄进去
{
  "registry-mirrors": [
    "https://dockerhub.azk8s.cn",
    "https://reg-mirror.qiniu.com"
  ]
}

# 重启docker服务,让它生效

sudo systemctl daemon-reload
sudo systemctl restart docker

安装一个简单的 Nginx 服务

以下步骤在docker安装完成之后

1、拉取官方镜像 - 面向docker的只读模板

docker pull nginx

# 安装完成后,查看安装结果
docker images nginx

2、创建一个页面,把它发布出去

mkdir www

# 建立一个网页
echo 'Hello docker!!!' >> www/index.html

# 查看一下
cat www/index.html

# -p代表端口映射
# 把它发布在我们服务器的8000端口上(注意:这里需要将阿里云服务器的8000端口入方向打开,阿里云服务器的8000端口默认是关闭的)
# 映射到nginx的80端口
# 因为nginx默认的服务是80端口
# /usr/share/nginx/html  这个是nginx的默认目录

docker run -p 8000:80 -v $PWD/www:/usr/share/nginx/html nginx

# 测试一下,在本机浏览器输入以下网址
http://00.00.00.00(IP地址):8000

# 会显示 “Hello docker!!!” 就代表成功
# 这种情况实际上是用命令行来启动,如果我们想让他后台执行的话(实际上就是后台模式)
docker run -p 8000:80 -v $PWD/www:/usr/share/nginx/html -d nginx

# 会返回一个UUID
# 查看docker进程
docker ps

# 如果我们想停止这个服务的话,只需要打前三位
# 例如:其中c99是UUID的前三位
docker stop c99

# 如果想重新启动
docker start c99

#如果在停止的情况下,使用docker ps查询不到,因为它没有被允许,此时可以用以下命令来查询所有
docker ps -a

3、如果想进入docker内部(docker实际上是一台linux服务器),进入伪终端

# c99 为docker进程id的前三位
docker exec -it c99 /bin/bash

# 此时已经进来了,可以确认一下刚刚的网页
cd /usr/share/nginx/html

cat index.html

# 可以看到  Hello docker !!!
# 退出
exit

4、删除这个docker镜像

docker rm c99

安装Node环境(部署后端需要)

# 在 /root 下新建nodejs文件夹(这里可以按照自己配置的路径)
mkdir nodejs

# 官网下载
wget https://nodejs.org/dist/v12.10.0/node-v12.10.0-linux-x64.tar.xz

# 如果官网下载报错:wget:unable to resolv host address
# 可以尝试进行下列操作
vi /etc/resolv.conf
# 添加下列代码
nameserver 8.8.8.8 #google https://nodejs.org


# 解压
tar xf node-v12.10.0-linux-x64.tar.xz

# 输入以下命令(注意,/root/nodejs  换成你自己官网下载node的解压路径,我这里是在 /root/nodejs 解压的)
ln -s /root/nodejs/node-v12.10.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/nodejs/node-v12.10.0-linux-x64/bin/npm /usr/local/bin/npm


# 测试
node -v
输出: v12.10.0
npm -v
输出: 6.10.3
代表nodejs安装成功

Compose安装

apt install docker-compose

# 试验一下是否安装成功
mkdir helloworld

vi docker-compose.yml

# 将下面代码弄进去
version: '3.1'
services:
  hello-world:
    image: hello-world

# 启动
docker-compose up
# 如果能打印出日志,说明没有问题,安装完毕

简介:Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排。

一句话概括:如果好几个Docker想一起工作,就用 Compose


安装MongoDB以及MongoDB-express(数据库可视化工具,在浏览器上显示)

cd source/docker

mkdir mongo

cd mongo

vi docker-compose.yml

#将下面代码弄进去
version: '3.1'
services:
  mongo:
    image: mongo
    restart: always
    ports:
      - 27017:27017
  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8000:8081

# 启动
docker-compose up

# 如果想后端启动
docker-compose up -d

# 如果HTTP超时的话,可以设置超时时间(可能因为服务器比较慢导致)
COMPOSE_HTTP_TIMEOUT=200 docker-compose up -d
# 在本机访问 http://0.0.0.0(IP地址):8000 就可以看到页面(需要在阿里云配置开启外部访问8000端口)

前端部署

需要的效果:本地修改代码,可以随时同步的服务器上面去
使用vscode的 Deploy 插件

settings.json

首先在根目录建立一个.vscode文件夹,里面新建 settings.json 文件

// files: **/* 代表所有的文件
// exclude: 把里面的东西例外出去
// deployOnSave:如果选 true ,每次保存文件都会自动进行同步
// targets 部署到什么地方
// name: 随便写
// dir: 传到服务器的什么目录下
// host:服务器地址
// privateKey: 私钥,登录需要的私钥地址
{
    "deploy":{
        "packages": [{
            "files": [
                "**/*"
            ],
            "exclude": [
                "node_modules/**",
                ".git/**",
                ".vscode/**",
                "**/node_modules/**"
            ],
            "deployOnSave": false
        }],
        "targets": [{
            "type": "sftp",
            "name": "AliyunServer",
            "dir": "/root/source/docker_cli",
            "host": "00.00.00.00",
            "port": 22,
            "user": "root",
            "privateKey": "D:/the_server/ssh/xxx.pem"
        }]
    }
}

nginx

在根目录新建一个文件夹: nginx
在nginx中新建一个文件夹:conf.d
在conf.d中新建一个文件:docker.conf

server {
  listen  80;
  location / {
    root    /usr/share/nginx/html;
    index   index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

server {
  listen  8000;
  location ~ /image/ {
      root /usr/share/nginx/file; # /usr/share/nginx/file 是虚拟路径,任意填
  }
}

server {
  listen 8443 ssl http2; #我这里使用eggjs写的后端,部署后的https环境默认是使用8443端口
  server_name www.域名.com;
  ssl_certificate cert/4105378_dylanlv.com.pem; #证书
  ssl_certificate_key cert/4105378_dylanlv.com.key; #密钥
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件。
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置。
  ssl_prefer_server_ciphers on;
  location / {
    proxy_pass https://www.域名.com:8443; # 你的接口地址
  }
}

其中,root为服务器运行web程序的地址
try_files 是为了前端vue项目的history模式


右键 docker.conf 文件,选择 Deploy
在服务器查看

cd /source/docker_cli

cat nginx/conf.d/docker.conf

# 如果里面有内容,则说明上传成功

docker-compose.yml

接着在项目的根目录下,建立一个文件:docker-compose.yml

version: '3.1'
services:
  nginx:
    restart: always
    image: nginx
    ports:
      - 8091:80
    volumes:
      - ./nginx/conf.d/:/etc/nginx/conf.d
      - ./dist:/usr/share/nginx/html/

然后将此文件 Deploy 一下

然后在服务器中
/source/docker_cli 下
执行命令:docker-compose up

然后在本机访问:http://0.0.0.0(IP地址):8091 (阿里云默认是不打开8091端口的,需要在阿里云设置一下)
可以访问到前端页面


后端部署

注:我这里后端是用eggJS写的

settings.json

在根目录新建 .vscode 文件夹,在其中新建 settings.json 文件

{
  "deploy":{
      "packages": [{
          "files": [
              "**/*"
          ],
          "exclude": [
              "node_modules/**",
              ".git/**",
              ".vscode/**",
              "**/node_modules/**"
          ],
          "deployOnSave": false
      }],
      "targets": [{
          "type": "sftp",
          "name": "AliyunServer",
          "dir": "/root/source/docker_cli/backend",
          "host": "0.0.0.0",
          "port": 22,
          "user": "root",
          "privateKey": "D:/the_server/ssh/xxxx.pem"
      }]
  }
}

然后将整个项目全部上传(Deploy),除了mode_modules
上传完成后,进入服务器,在 /root/source/docker_cli/backend 目录下

# 下载依赖包
npm i
# 调试程序  
npm run dev
# 如果调试没问题,则让程序后台运行(看网上有人用pkg来进行打包,本人暂时没验证成功,所以用这个方法)
npm run start

解决跨域问题

因为是不同端口,又没有使用nginx进行代理,所以会出现跨域的情况(后面再研究后端代码使用nginx代理)
这里使用egg-cors插件

npm i egg-cors -S

在config/plugin.js 中加入以下代码

cors: {
  enable: true,
  package: 'egg-cors',
},

在config/config.default.js 中加入以下代码

config.security = {
  csrf: {
    enable: false,
    ignoreJSON: true,
  },
  domainWhiteList: [ 'http://localhost:8091' ],
};
config.cors = {
  origin: '*',
  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
};

shadowsocks + privoxy 进行代理

注:我的服务器是ubuntu18版本的,测试过程中使用ubuntu20版本有些包会不同

# 更新包
apt-get update

# 安装python
sudo apt-get install python

# 安装pip包
sudo apt-get install python-pip

# 安装SS
sudo pip install shadowsocks

# 更新SS到3.0版本(这里是因为我的SS服务器用的aes-256-gcm加密方式,这种加密方式3.0版本后才有)
pip install https://github.com/shadowsocks/shadowsocks/archive/master.zip -U

注:SS服务器的搭建以及配置这里不详细讲述了,本文的SS是客户端配置

# 将下面的内容写入ss配置  /etc/shadowsocks.json
vim /etc/shadowsocks.json

# 内容
{
"server":"xxx.xxx.xxx.xxx", 
"server_port": xxxx,
"local_address": "127.0.0.1",
"local_port":1080,
"password":"xxxxxx",
"timeout":600,
"method":"aes-256-gcm"
}

server: 服务器ip
server_port:服务器端口
password:密码
我这里将ss的内容代理到本地的1080端口了

# 后台运行
sudo sslocal -c /etc/shadowsocks.json -d start

# 关闭(不用执行)
sudo sslocal -c /etc/shadowsocks.json -d stop

安装和配置privoxy

apt-get install privoxy

vim /etc/privoxy/config
在1336行添加以下内容(注意最后的 . 一定需要)

forward-socks5t / 127.0.0.1:1080 .

这里监听端口默认开启的是:127.0.0.1:8118

启动privoxy

sudo service privoxy start
# 设置全局代理(一般不需要)
export http_proxy='http://localhost:8118'
export https_proxy='https://localhost:8118'

# 取消全局代理
unset http_proxy
unset https_proxy

如果服务器重启后,需要重新开启服务

sudo sslocal -c /etc/shadowsocks.json -d start

至此,在需要翻墙的地方进行 127.0.0.1:8118 的转发就行了