前端项目部署流程

前端项目部署流程

1.首先我们需要有一台服务器，这里我用的是阿里云ecs服务器。选择的服务器操作系统是linux，下面我们开始从0开始部署一个前端项目到服务器上。

步骤：
一、链接服务器
(1). 我们需要先在自己电脑链接上我们的服务器，我使用的是xshell工具。

# 通过ssh @root[ipaddress] 来链接你的服务器
#（将ipaddress替换成你服务器的公网IP地址）
ssh @root[ipaddress]

二、部署一个简单的静态页面
登录成功之后，我们先来部署一个简单的html静态页面，练练手，这里我是用node.js来启了一个服务。
首先我们需要在服务器上安装Node环境：如下

# 列出所有node版本
nvm list-remote

# 选择一个版本安装
nvm install v15.0.0

#安装完成之后，可以通过nvm ls 查看已安装的所有node版本
nvm ls
#如果想切换Node版本可以通过 nvm use [版本号] 来切换node版本
nvm use v15.0.0
# 安装完成，我们可以通过 node -v 来查看当前的版本
node -v

问题：这里有一个问题就是，每次服务器重启之后，都要执行一遍nvm use [node版本号] 命令来重新选择node版本，否则直接使用node命令，会报识别不了命令的错误

接下来我们在随便一个文件夹（自行创建）

# 创建命令  mkdir [文件夹名称]  
mkdir my_project

创建完成之后，我们进入文件夹，创建一个main.js 文件，并且编写服务

cd my_project
# 创建main.js文件    touch [文件名]  
touch main.js
# 编辑 main.js 文件   vim [文件名]
vim main.js

const http = require('http');
const fs = require('fs')
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => {
            res.statusCode = 200;
            res.setHeader('Content-Type', 'text/html');
            fs.readFile('./myPage.html','utf-8',function(err,data){
             if(err){
              throw err;
             }
             res.end(data)
            })
});

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

# 将代码填入，之后  通过 :wq命令保存并退出
:wq
# 这里我是直接将本地的myPage.html文件上传到了服务器的my_project文件夹内
# xshell 可以直接通过拖动文件的方式上传到服务器（很方便）
# 直接 node main.js 
node main.js

接下来我们就可以通过访问我们的服务器 ip:3000 来访问我们的服务了

能访问就说明成功了!

三、部署一个管理系统（我这里是部署了一个vue项目）
这时，我们需要先在服务器上安装nginx
1.安装编译工具以及库文件

yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel

2.安装pcre

#pcre的作用是支持nginx的rewrite功能
cd /usr/local/src/
wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
#编译安装
./configure
make && make install

3.安装nginx,查看官网复制下载链接：

#下载nginx安装包
cd /usr/local/src
wget http://nginx.org/download/nginx-1.16.1.tar.gz

#解压缩安装包
tar zxvf nginx-1.16.1.tar.gz
#将nginx-1.16.1.tar.gz文件夹改名为nginx并且进入安装包目录
mv nginx-1.16.1 nginx
cd nginx

#编译安装
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
#如果出现Permission Denied，请先修改configure文件的权限 chmod 777 -R configure
make
make install

4.nginx的启动

#启动
cd /usr/local/nginx/sbin
./nginx

#重启
cd /usr/local/nginx/sbin
./nginx -s reload

#判断配置文件是否正确
cd /usr/local/nginx/sbin
./nginx -t

安装完成之后，在自己电脑上访问服务器ip，如果显示welcom to nginx则表示配置成功
接下来我们再给nginx配置一下开机自启

cat > /usr/lib/systemd/system/nginx.service << EOF
[Unit]
Description=nginx
After=network.target
  
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
PrivateTmp=true
  
[Install]
WantedBy=multi-user.target
EOF

# 注册开机自启需要先停用nginx 
/usr/local/nginx/sbin/nginx -s stop
# 注册
systemctl enable nginx
systemctl start nginx
# 在任意目录直接使用nginx命令 添加一个软连接
ln -s  /usr/local/nginx/sbin/nginx /usr/bin/nginx

到此nginx 安装配置完成

接下来我们可以在本地将我们的vue项目打包

npm run build

然后会生成一个打包文件，默认是dist文件夹
再将这个文件夹进行压缩生成dist.zip
然后将这个zip文件直接通过xshell拖动上传到服务器上
这里需要记住你存放dist.zip文件的目录，我是放在 my_project文件夹下了
接下来我们需要将zip文件解压

# 使用 unzip [参数] [待解压缩文件]  解压刚才的dist.zip文件
# 这里是直接解压在当前文件夹
unzip dist.zip

# 如果这一步报错，则可能是没有安装zip命令，直接用yum安装一下就好了
yum install zip
yum install unzip

接下来需要修改Nginx的conf文件

#忘记nginx安装目录的使用 ps -ef | grep nginx查看。
# yum安装的默认在/etc/nginx/nginx.conf


vi /usr/local/nginx/conf/nginx.conf

# 修改如下
# 新建一个服务
server {
  # 声明监听的端口
  listen 80;
  # 如有多域名映射到同一端口的，可以用server_name 区分，默认localhost
  server_name localhost;

  # 匹配'/'开头的路径 注意设定 root路径是有dist的
  location / {
    # 指定文件的根目录，主要结尾不要带/   我的项目是放再了/usr/local/my_project目录下
    root /usr/local/my_project/dist;
    # 指定默认跳转页面尾 /index.html
    index /index.html;
  }

  # 匹配'/adminApi'开头的路径进行跨域 ip和port自行替换
  # adminApi 是vue.config.js中的proxy声明的
  location /adminApi {
    proxy_pass http://ip:port;
  }
}

接下来要让我们的nginx配置生效

# 进入nginx 安装目录，yum安装的直接使用nginx代替sbin/nginx
# 检查配置文件合法性 
sbin/nginx -t
# nginx 热更新配置
sbin/nginx -s reload

到此就算部署完成，此时可以直接访问你服务器的ip地址就可以访问项目了。