前端部署到服务器上

记录一下自己从买服务器到部署的历程

一、云服务器

云服务购买

可以在腾讯云和阿里云上面搜索云服务器,然后购买自己需要的云服务器,我买的是1核2G的 ubuntu server 公网宽带选的1M

买好后 自己试一下连接自己的服务器 在cmd里输入

• windows上要ssh 没有的话需要自己安装openSSH
• 我在阿里云上买的服务器,刚开始没有设置实例密码,连接之前得先去实例那里设置密码才能连接

ssh 用户名@公网IP 回车 输入密码

域名购买

在域名选择那里,输入自己想要的域名,是否被注册,没有注册的话就可以购买

购买了域名需要备案 大概30天左右

解析域名

在域名列表那里 进行解析设置 解析到我们的服务器上(要实名制审核通过后才能进行域名解析 备案后我们的域名才能访问)

对应的域名那里点击解析 添加记录 添加进我们自己的公网IP地址

备案 (还没开始弄 后面再记录)

现在暂时不用域名访问 先直接用公网IP测试,等后面备案好后再使用域名

申请SSL证书(小程序需要https协议才能访问)

普通域名只要申请SSL证书就可以使用https
找到阿里云
https://yundun.console.aliyun.com
选择免费证书
一年有20个免费证书
申请免费证书 要填写自己的域名 (域名没有解析成功 ssl证书配置不成功)
证书颁发也需要一到两天的时间
证书颁发成功 点击下载
下载后把nginx的证书传到云服务器上nginx目录下 创建ssl文件夹

注意:阿里云服务器默认开放3389端口和22端口 要想访问其他端口需要自己配置安全组才能访问

二、在服务器上安装Nginx Node mp2

登录云服务器
ssh 用户名@公网IP 回车 密码
登录成功后会显示welcome to …

安装node.js
下载安装包 默认下载到当前路径下https://nodejs.org/zh-cn/download/

wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz
ls // 查看当前目录下文件 看看是否已经下载了下来

执行以下命令,解压Node.js的安装包

tar -xvf node-v14.16.0-linux-x64.tar.xz

执行以下命令,重命名Node.js安装目录(就是把解压后的文件换一个地方放)

mv node-v14.16.0-linux-x64/ /usr/local/node
// 需要注意是不是把整个node-v14.16.0-linux-x64目录放在了node下 我们需要的是把里面的东西放在node下  之前我没注意就是把整个目录放进去了,node启动不起来,结果找了半天原因

配置Node.js
执行以下命令,将Node.js的可执行文件目录加入到系统变量中

echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile

执行以下命令,使刚配置的Node.js环境变量立即生效

source /etc/profile
// 分别查看node和npm版本
node -v 
npm -v

安装淘宝源

npm install -g cnpm --registry=https://registry.npm.taobao.org

ubantu安装Nginx

sudo apt-get install nginx
nginx -v 
whereis nginx // 可以查看安装路径
// 最好在root根目录下输入这个命令
sudo /etc/init.d/nginx start //开启nginx  // stop停止 // restart // reload
// 在/etc/nginx/sites-available/default里面修改配置
// 修改的时候 记得备份一份 备份default文件
sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.backup
nginx -t // 试运行一下看修改过后的配置是否有问题 没有问题就重启
sudo /etc/init.d/nginx relaod //修改配置后重启

注意:nginx默认打开的是80端口,而我们自己的服务器没有默认开放80端口,所以我们要在配置文件(deafult)里把80端口修改为自己需要的端口号

// 查看有哪些nginx进程
ps -ef | grep nginx // ps -ef 查看进程  grep是过滤 只看nginx的进程
// 查看nginx进程的pid
ps -C nginx -o pid 

安装PM2

npm install -g pm2

使用pm2启动服务
pm2 start app.js

三、部署

使用node服务

在服务器上创建一个文件夹如server
cd server
npm init
npm i koa koa-static --save-dev
把vue打包好的dist文件夹放在server文件夹下面
创建app.js 输入一下内容

const koa = require('koa')

const app =new koa();

const static = require('koa-static')

const path = require('path')

app.use(static(path.join(__dirname,'/dist'),{
    setHeaders:function(res,path,stats){

    }
}))

app.use(async (ctx,next) => {
    try {
        await next()
    } catch (error) {
        ctx.response.status = err.statusCode || err.status || 500;
        ctx.response.body = {
            message:err.message
        }
    }
})

app.listen(8009)

console.log('my app启动 端口号:8009')

修改package.json文件 在scripts里面添加"start": “node app.js”

在server目录下运行node npm run start 访问公网IP:8009就可以了

使用nginx

启动nginx
sudo /etc/init.d/nginx start

修改配置文件/etc/nginx/sites-available/default
把
listen 80 default_server;
listen [::]:80 default_server;
改为
listen 8009 default_server;
listen [::]:8009 default_server;

把 root /var/www/html; 路径改为自己项目的路径
如 root /etc/server/dist;

如果需要跨域做反向代理,需要添加location
假如需要把192.168.1.1:80/authorApi/getCode请求重定向为为1.1.1.1:80/getCode

location  /authorApi  {
					rewrite  ^/authorApi/(.*)$ /$1 break; // 必须写rewrite 不然不生效
                   	proxy_pass   http://1.1.1.1:80; # 后端接口 IP:port
                }

注意 location /authorApi 需要加在localtion / 前面 且前端访问接口要把http://1.1.1.1:80/…改为192.168.1.1:80/authorApi/…

修改后配置后,查看配置是否有误 nginx -t ;没有就重启nginx
然后就直接使用公网IP:8009就可以使用了

使用docker上的nginx部署前端项目

docker run --rm --name ksh -p 8009:80 -d -v /usr/local/visual/nginx:/etc/nginx/ -v /usr/local/visual/web/html/:/usr/share/nginx/html  nginx

/*
docker run --rm // -rm 停掉这个ksh nginx就删除掉
--name ksh 
-p 8009:80  //端口8009  
-d -v /usr/local/visual/nginx:/etc/nginx/  // 把nginx配置映射给nginx容器
-v /usr/local/visual/web/html/:/usr/share/nginx/html // 把自己的源码映射到nginx容器里
 nginx
*/


docker ps //查看docker正在运行哪些容器
docker ps -a //查看dockers里面有哪些容器包括已经停止的

docker stop ksh //停止ksh这个容器
docker pull nginx //下载nginx

docker images // 查看docker 镜像


/*
注意：
当docker运行nginx时，外界访问还是docker所在的那个IP地址，就相当于nginx在那台机器上运行一样。
但对于docker所在的那台机器来说，nginx就是附属于docker的一个镜像。若操作nginx还是由docker登录nginx容器，进行操作。
登录的nginx容器就是一个linux系统，只不过只有nginx而已，nginx按照linux默认路径安装。比如
root@c0462d5e1878:/usr/share/nginx/html# ls 这个路径就是默认的静态页面存放路径
50x.html  index.html
*/

// 可以直接把需要的文件写好直接放在容器指定的目录下，但这样比较麻烦，还是想之前那样做映射比较好 修改起来不用进入容器改代码 直接在容器外面改代码就可以了 并且容器里面没有安装vim 还是更新再安装vim很麻烦 
// docker cp 用于容器与主机之间的数据拷贝
docker cp hello.html c0462d5e1878(容器id):/usr/share/nginx/html
//这样就会显示hello.html里面的内容

docker exec -it c0462d5e1878 bash // 进入容器

// 刚开始我们没有nginx文件 我们可以把默认容器里面的nginx复制出来，再映射，这样改nginx的时候方便
tar -zcvf nginx.tar.gz nginx
exit // 退出容器
docker cp c0462d5e1878(容器id):/etc/nginx.tar.gz /usr/local/visual

tar -zxvf nginx.tar.gz

rm -rf nginx.tar.gz //删除压缩包

default.conf
 location / {
        # 使用history模式
        try_files $uri $uri/ /index.html; #去掉就是hash 模式
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
    }