架构-前端项目自动部署笔记

最新推荐文章于 2024-07-31 09:07:22 发布

weixin_45687657

最新推荐文章于 2024-07-31 09:07:22 发布

阅读量199

点赞数

文章标签：架构前端笔记

本文链接：https://blog.csdn.net/weixin_45687657/article/details/130467692

版权

   4)购买服务器
       1.Xshell链接服务器
           新建-->名称和主机为购买的服务器ip地址-->确定、打开-->用户名root、密码服务器密码-->修改语言utf-8、字体大小16
       2.更新系统
           yum update
       3.下载git
           yum install git -y
           mkdir /usr/projects //创建文件夹放git项目代码
           ssh-keygen -t rsa -b 4096 -C "zhufengnodejs@126.com" //生成ssh，zhufengnodejs@126.com放自己的邮箱
           cat /root/.ssh/id_rsa.pub //查看ssh公钥，复制到git上添加ssh，这样以后去git上拉取代码就不用在输入密码了
           cd /usr/projects //把代码拉取下来
           git clone git@github.com:zhufengnodejs/vue-front.git
           git clone git@github.com:zhufengnodejs/vue-back.git
           git clone git@github.com:zhufengnodejs/vue-webhook.git
           wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash //安装node和npm
           . /root/.bashrc
           nvm install stable
           npm -v
           node -v 查看是否安装上npm和node
           npm i nrm -g
           nrm use taobao//添加阿里镜像，加快下载速度
       4.开启阿里云服务器端口
           阿里云网站点击左侧菜单栏实例-->管理-->左侧菜单栏本实例安全组-->配置-->快速创建规则(自定义端口比如4000/4000，4000端口可以访问，授权对象：电脑ip地址，允许哪些电脑访问,设置前后端开启服务的端口号)
       5.安装docker
           yum install -y yum-utils device-mapper-persistent-data lvm2
           //添加阿里镜像，加快下载速度
           yum-config-manager \
           --add-repo \
           https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
           yum install -y docker-ce docker-ce-cli containerd.io
           docker -V //查看是否下载完
           yum install nginx -y
       6.阿里云加速
           //1
           mkdir -p /etc/docker
           //2
           tee /etc/docker/daemon.json <<-'EOF'
           {
           "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
           }
           EOF
           //3
           systemctl daemon-reload
           systemctl restart docker
       7.进入后端项目
           cd vue-back
           npm i
           npm start//运行后端项目,packjson.json配置的运行命令
           服务器ip地址:端口号 //访问项目
       8.进入后端项目
           cd vue-front
           npm i // 如果下载失败,重新开个窗口cd /usr/projects/vue-front,在npm i
           npm run serve//运行前端项目,packjson.json配置的运行命令
           服务器ip地址:端口号 //访问项目
       9.开启CICD服务器
           将项目推到git上
           //Xshell开启服务
           cd vue-webhook
           npm i
           npm start//运行后端项目,packjson.json配置的运行命令
           npm i pm2 -g //在后台运行CICD服务器,这样可以持久运行项目
           //后台布署,创建vue-back.sh
           #!/bin/bash
           WORK_PATH='/usr/projects/vue-back'
           cd $WORK_PATH
           echo "清理代码"
           git reset --hard origin/master
           git clean -f
           echo "拉取最新代码"
           git pull origin master
           echo "开始构建镜像"
           docker build -t vue-back .
           echo "删除旧容器"
           docker stop vue-back-container
           docker rm vue-back-container
           echo "启动新容器"
           docker container run -p 3000:3000 -d --name vue-back-container vue-back
           //后台项目创建Dockerfile文件
           FROM node
           LABEL name="vue-back"
           LABEL version="1.0"
           COPY . /app
           WORKDIR /app
           RUN npm install
           EXPOSE 3000
           CMD npm start
           //前台项目部署，创建前台项目vue-front.sh文件
           #!/bin/bash
           WORK_PATH='/usr/projects/vue-front'
           cd $WORK_PATH
           echo "清理代码"
           git reset --hard origin/master
           git clean -f
           echo "拉取最新代码"
           git pull origin master
           echo "打包最新代码"
           npm run build
           echo "开始构建镜像"
           docker build -t vue-front .
           echo "删除旧容器"
           docker stop vue-front-container
           docker rm vue-front-container
           echo "启动新容器"
           docker container run -p 80:80 -d --name vue-front-container vue-front
           //前台项目创建Dockerfile文件
           FROM nginx
           LABEL name="vue-front"
           LABEL version="1.0"
           COPY ./dist/ /usr/share/nginx/html/
           COPY ./vue-front.conf /etc/nginx/conf.d/
           EXPOSE 80
           //创建vue-front.conf文件
           server {
           listen 80;
           server_name 47.104.15.123;
           location / {
           root /usr/share/nginx/html;
           index index.html index.htm;
           try_files $uri $uri/ /index.html;
           }
           location /api {
           proxy_pass http://47.104.15.123:3000;
           }
           }

1.CICD
   CI 的意思是持续构建。负责拉取代码库中的代码后，执行用户预置定义好的操作脚本，通过一系列编译操作构建出一个制品，并将制品推送至到制品库里面。常用工具有 Gitlab CI，Github CI，Jenkins 等。
   这个环节不参与部署，只负责构建代码，然后保存构建物。构建物被称为制品，保存制品的地方被称为制品库
   CD 则有2层含义：持续部署（Continuous Deployment）和持续交付（Continuous Delivery）。持续交付的概念是：将制品库的制品拿出后，部署在测试环境 / 交付给客户提前测试。
   持续部署则是将制品部署在生产环境。
2.购买服务器
   https://ecs.console.aliyun.com/#/home
   1)创建实例
       1.基础配置
           计费方式(按量付费)-->地域(华北1青岛(随机分配))-->通用型、4vcpu、32gb(课程买的配置比较好)-->镜像(公共镜像、CenOS、7.6.64位)-->高效云盘、40GB
       2.网络与安全组
       3.系统配置
           登录凭证(自定义密码)-->实例名称/描述(zhufengjiaguoke)
       4.确认订单
           确认订单-->返回控制平台-->点击ip地址公后面图标启动
2.登录服务器
   Xshell(git ssh可视化链接服务器)
           打开后新建-->名称和主机都是ip地址-->端口号默认22-->确定、链接、接受并保存-->输入用户名root、记住用户名-->输入服务器自定义密码-->登录成功后修改语言为utf-8(文字大小旁边图标),文字大小16
3. 安装docker
   //更新电脑
   yum update
   //
   yum install -y yum-utils device-mapper-persistent-data lvm2
   //指定安装源
   sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
   //下载docker
   yum install docker-ce -y
   //重启启动docker
   systemctl start docker.service
   //开机启动docker
   systemctl enable docker.service
4.配置阿里云镜像源
   //1
   mkdir -p /etc/docker
   //2
   sudo tee /etc/docker/daemon.json <<-'EOF'
   {
   "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
   }
   EOF
   //3
   systemctl daemon-reload
   //4
   systemctl restart docker
5.集成 Git 仓库
   //安装git
   yum install git -y
   //生成公钥私钥,zhufengnodejs@126.com为邮箱
   //公钥是给git设置的，私钥可以拉取git上的项目
   ssh-keygen -t rsa -C "zhufengnodejs@126.com"
   //拷贝公钥
   //1
   cd /root/.ssh
   //2
   cat id_rsa.pub
   //打开马云或者git设置SSH公钥
   设置=>安全设置 => SSH公钥
6.创建项目,构建镜像
   1)使用react或者vue脚手架创建项目
   2)项目根目录创建Dockerfile文件
       FROM nginx:1.15
       COPY build /etc/nginx/html
       COPY conf /etc/nginx/
       WORKDIR /etc/nginx/html
   2)项目根目录创建conf\site文件
       server {
       listen 80;
       server_name _;
       root /etc/nginx/html;
       }
7.Jenkins
   Jenkins 是一个基于 Java 语言开发的持续构建工具平台，主要用于持续、自动的构建/测试你的软件和项目。它可以执行你预先设定好的设置和构建脚本，也可以和 Git
   代码库做集成，实现自动触发和定时触发构建
   //安装java
   yum install -y java
   //安装Jenkins
   //1
   sudo wget -O /etc/yum.repos.d/jenkins.repo https://img.zhufengpeixun.com/jenkins.repo
   //2
   sudo rpm --import https://img.zhufengpeixun.com/jenkins.io.key
   //3
   yum install jenkins -y
   //启动 Jenkins
   systemctl start jenkins.service
   //开放端口
   firewall-cmd --zone=public --add-port=8080/tcp --permanent
   firewall-cmd --zone=public --add-port=50000/tcp --permanent
   systemctl start firewalld.service
   //打开浏览器访问8.136.218.128为服务器ip地址,需要去服务器官网开放服务器8080端口号
   http://8.136.218.128:8080/
   //查看密码，复制密码启动网页jenkins
   cat /var/lib/jenkins/secrets/initialAdminPassword
   //修改插件镜像
   //点击安装推荐插件
   sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' /var/lib/jenkins/updates/default.json && sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' /var/lib/jenkins/updates/default.json
   //设置第一个管理员账号
   //jenkins URL设置为http://8.136.218.128:8080/
   //添加到docker用户组里
   groupadd docker
   sudo gpasswd -a jenkins docker #将当前用户添加至docker用户组
   newgrp docker #更新docker用户组
   //安装Nodejs
       1.系统管理 => 插件管理 => 可选插件 =》安装NodeJS插件
       2.全局工具配置 => NodeJS => 新增NodeJS(别名可以选择node版本，新增安装选择install from nodejs org mirror)-->应用、保存
       3.任务的配置=>构建环境=>选中 Provide Node & npm bin/ folder to PATH-->应用、保存
   //新建一个任务
       1.新建item
       2.输入一个任务名称
       3.选择Freestyle project
       4.确定
       5.描述
       6.构建选择执行shell
           #!/bin/sh

           npm install --registry=https://registry.npm.taobao.org
           npm run build
           docker build -t react-project .
       7.链接git仓库
           1)源码管理选择Git,在repository URL填上git仓库地址(成功的话，地下红色提示信息会不见)
           2)repository URL下面点击添加
               1.类型选择SSH Username with private key
               2.描述、ID(邮箱@前面部分)、username(邮箱)
               3.勾上Private key,执行cat id_rsa添加私钥
       8.构建完项目，docker image ls查看是否有构建的项目

1.持续集成
   持续集成(Continuous Integration,CI) 代码合并、构建、布署、测试在一起，不断执行这个过程并对结果进行反馈
   持续部署(Continuous Deloyment,CD) 部署到生产环境
   持续交付(Continuous Delivery,CD) 部署到生产环境，给用户使用
   DevOps 是一个完整的面向IT运维的工作流，以 IT 自动化以及持续集成（CI）、持续部署（CD）为基础，来优化程式开发、测试、系统运维等所有环节
2.阿里云购买服务器
2.安装git
   1.安装git
       yum install git -y
   2.配置公钥私钥
       //生成公钥私钥,zhufengnodejs@126.com为邮箱
       //公钥是给git设置的，私钥可以拉取git上的项目
       ssh-keygen -t rsa -C "zhufengnodejs@126.com"
       //拷贝公钥
       //1
       cd /root/.ssh
       //2
       cat id_rsa.pub
       //打开马云或者git设置SSH公钥
       设置=>安全设置 => SSH公钥
3.创建react或vue项目推到git上
4.Jenkins
   1)安装JDK
       1.cd /usr/local/src
       2.下载jdk包:wget http://img.zhufengpeixun.cn/jdk1.8.0_211.tar.gz
       3.解压jdk包:tar -xzvf jdk1.8.0_211.tar.gz
       4.创建/usr/java文件夹将jdk放入文件夹中
           cp -r /usr/local/src/jdk1.8.0_211 /usr/java
       5./usr/bin/java和/usr/java/jdk1.8.0_211/bin/java文件做个映射，访问/usr/bin/java就是访问/usr/java/jdk1.8.0_211/bin/java
           rm -rf /usr/bin/java　&&　ln -s /usr/java/jdk1.8.0_211/bin/java /usr/bin/java
       6.修改配置文件
           //1
           vi /etc/profile
           //输入文件内容 i开始写入内容,x保存内容
           JAVA_HOME=/usr/java/jdk1.8.0_211
           export CLASSPATH=.:${JAVA_HOME}/jre/lib/rt.jar:${JAVA_HOME}/lib/dt.jar:${JAVA_HOME}/lib/tools.jar
           export PATH=$PATH:${JAVA_HOME}/bin
       7.生效配置
           //1
           source /etc/profile
           //这一步能看到java版本说明有效
           java --version
   2)安装jenkins
       1.cd /usr/local/src
       2.wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
       3.rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
       4.yum install -y jenkins
       5.关闭防火墙
           //1
           systemctl stop firewalld.service
           //2
           systemctl disable firewalld.service
       6.启动jenkins
           //id地址+:8080访问jenkins
           systemctl start jenkins
       7.查看密码，复制密码启动网页jenkins
           cat /var/lib/jenkins/secrets/initialAdminPassword
       8.修改插件镜像
           sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' /var/lib/jenkins/updates/default.json && sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' /var/lib/jenkins/updates/default.json
       9.安装推荐插件
       10.安装插件
           1)Publish Over SSH:通过ssh协议发布项目
           2)nvm wrapper:提供node环境
       11.新建任务
           1)创建一个自由风格项目
           2)链接git仓库
               1.源码管理选择Git
               2.在repository URL填上git仓库地址(成功的话，地下红色提示信息会不见)
               3.repository URL下面点击添加
                   1)类型选择Username with password
                   2)填上git用户名和密码
               4.指定分支选择*/master
               5.源码库浏览器githubweb，URL选择git仓库地址
               6.构建触发器选择轮询SCM,输入* * * * *
               7.保存，然后构建一次任务，cd //var/lib/jenkins/workspace(jenkins工作目录)，然后ls查看代码是否拉取成功
           3)打包
               1.构建环境选择run in the build in an nvm managed enviroment
                   node -v查出node版本填上node version
               2.构建选择执行shell
                   //设置npm来源
                   npm config registry http://registry.npm.taobao.org
                   npm install
                   //删除就build文件在打包
                   rm -rf build
                   npm run build
                   //部署逻辑
                   cd build
                   //将build文件夹里面所有的文件压缩到build.tar文件中
                   tar -zcvf build.tar.gz *
           4)部署项目到测试环境
               1.构建选择执行shell添加如下代码
                   cd build
                   tar -zcvf build.tar.gz *
               1.在买台服务器
               2.安装nignx
                   1)nignx来源
                       vi /etc/yum.repos.d/nginx.repo
                       //添加内容
                       [nginx]
                       name=nginx repo
                       baseurl=http://nginx.org/packages/centos/7/$basearch/
                       gpgcheck=0
                       enabled=1
                   2)安装
                       yum install nginx -y
                       nginx -v 查看安装的版本
                   3)systemctl start nginx.service:启动nginx
                   4)关闭防火墙
                       //1
                       systemctl stop firewalld.service
                       //2
                       systemctl disable firewalld.service
                   5)浏览器输入ip地址直接访问nginx
                   6)设置Publish Over SSH插件(下面操作在jekins服务器上操作)
                       1.配置公钥私钥
                           cd /root
                           //生成公钥私钥
                           ssh-keygen -t rsa
                       2.系统管理，系统设置，找到Publish Over SSH
                           1)Passphrase设置为空
                           2)Path to key放上/root/.ssh/id_rsa
                           3)新增SSH Servers(下面是服务器信息)
                               1.name和hostname填上ip地址
                               2.username为root
                               3.remote derictory填上/usr/share/nginx/html
                           4)实现一台服务器访问另外一台服务器免登陆
                               1.ssh-keygen -t rsa
                               2.jekins服务器输入ssh-copy-id 测试服务器ip
                               3.测试服务器输入ssh-copy-id jekins服务器ip
                           5)点击test xxx显示成功即可
               3.构建后操作选择send build artifacts over ssh
                   1)source files填上build/build.tar.gz
                   2)remoce prefix填上build/
                   3)remote derictory填上/usr/share/nginx/html
                   4)exec command填上
                       cd /usr/share/nginx/html
                       tar -xcvf build.tar.gz //解压build.tar.gz包
                       rm -rf build.tar.gz
               4.再次打包刷新浏览器的nginx页面即可访问到页面了
           5)指定分支部署:构建选择执行shell替换为如下内容
               if [ "${GIT_BRANCH}" == "origin/master" ];then
                   npm config registry http://registry.npm.taobao.org
                   npm install
                   //删除就build文件在打包
                   rm -rf build
                   npm run build
                   //部署逻辑
                   cd build
                   //将build文件夹里面所有的文件压缩到build.tar文件中
                   tar -zcvf build.tar.gz *
               fi

7)新建任务
           1.完成后回到首页新建任务，填写任务名称，选择构建自由风格的软件项目，点击确定
           2.勾上GitHub复制github项目链接
           3.源码管理勾上git,Repository URL填github项目链接+.git(这里不报错就可以了)
           4.点击添加，类型选择Username with password,填写git用户名、git密码、描述
           5.指定分支选择*/master
           6.源码库浏览器githubweb，URL选择git仓库地址
           7.构建触发器选择轮询SCM,输入* * * * *
           8.构建选择执行shell
               cd /usr/local/nginx
               cd html/
               mkdir blog
               cd blog/
               //构建选择执行shell输入框输入
               sudo cd /usr/local/nginx/html/blog
               sudo rm -r *
               sudo cp -r /var/lib/jenkins/workspace/myBlog/* /usr/local/nginx/html/blog （myBlog为项目名称）
           9.点击保存
           10.设置构建时自动输入sudo密码
               sudo visudo
               滑动最下面加上jenkins ALL=(ALL) NOPASSWD: ALL (i输入内容)
               然后按下ctrl+o保存，接着按下回车Enter，最后ctrl+x退出。(:wq退出)
           11.点击立即构建
               点击当前构建任务-->控制台输入，最后面是finished success代表构建成功

weixin_45687657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
架构-前端项目自动部署笔记

5./usr/bin/java和/usr/java/jdk1.8.0_211/bin/java文件做个映射，访问/usr/bin/java就是访问/usr/java/jdk1.8.0_211/bin/java。5./usr/bin/java和/usr/java/jdk1.8.0_211/bin/java文件做个映射，访问/usr/bin/java就是访问/usr/java/jdk1.8.0_211/bin/java。3.remote derictory填上/usr/share/nginx/html。
复制链接

扫一扫