‘壹’ 在自己搭建的gitlab中，能部署用户可访问的前端打包文件吗
不知道 自建的gitLab 是否有 pages服务，
但是你既然有自己的服务器，应该是可以通过 Nginx 配置 ，将路径映射到你打包后的目录中去。这个是可以实现的
nginx 静态文件服务器的配置请网络。
‘贰’ gitLab CI/CD docker自动部署vue前端项目
查询了好多资料，都没有找到可以直接应用的，综合了好多，配置runner之后，前端项目里面需要在项目根目录配置三个文件：
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 设置缓存
cache:
paths:
- node_moles/
- dist/
# 安装依赖 before_script 会在每个 stages 执行之前运行
before_script:
- npm install
# 编译 这里对应上方 stages ，
build:
stage: build
script:# script 为要执行的命令，可以多条按顺序执行
- npm run build:prod
docker-deploy:
stage: deploy
# 执行Job内容
script:
# 通过Dockerfile生成pactera_pflife_ui镜像
- sudo docker build -t pactera_pflife_ui .
# 删除已经在运行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通过镜像启动容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 执行Job的服务器
- pflife-web
only:
# 只有在master分支才会执行
- dev_xht
2.Dockerfile 文件
# 设置基础镜像
FROM nginx:latest
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改为docker服务宿主机的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
总之，三个文件部署之后运行正常
‘叁’ gitlab 使用的什么开发的
Git - 版本控制工具 Git源布式版本控制系统用效、高速处理非项目版本管理[4] Git Linus Torvalds 帮助管理 Linux 内核发发放源码版本控制软件 Torvalds 始着手发 Git ...
-
‘肆’ 前端环境的安装与配置
前端环境的安装与配置？一、工具安装
1.编辑器
2.Git(分布式的代码管理工具)
3.Photoshop
4.Nodejs链接
二、 环境配置
1.配置git：
1.1 设置Git的user name和email：
$ git config --global user.name "name"
$ git config --global user.email "[email protected]"
1.2 生成SSH密钥过程：(看需求配置)
$ ssh-keygen -t rsa -C "[email protected]"
3个回车，密码为空。
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
………………
最后得到了两个文件：id_rsa和id_rsa.pub
添加密钥到ssh：
登陆gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件，复制出里面的内容，添加到 key 内，此时 Title 会自动填上你的邮箱，没有的话手动填写, ADD KEY
1.3 拉取代码到本地(权限)
创建一个存放项目的文件夹，在该文件夹下，单击右键，选择git bash,打开git命令框，编写命令：git clone [email protected]:xx/xx.git（可以在gitlab项目中找到存放地址，gitlab地址：http://gitlab.vchangyi.com ），按回车，就可以从gitlab上clone代码到本地文件夹
1.4 手动安装nodejs，如果是pc端安装的话，nodejs版本不能过低。
安装最新版的话npm安装项目依赖会有问题，手机端gulp无法启动，所以建议安装nodejs V6。
1.5 测试node是否安装成功
在git 命令窗或者node 命令窗中输入命令 ：node -v
1.6 同理，测试npm是否安装成功npm -v
1.7安装gulp
在项目下打开git 命令窗，从淘宝源上自行安装，这个时间需要等待和耐心，也会有网络原因导致安装失败，如果安装失败可以多来几次，直到成功为止。
如果是pc端：npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads
npm 安装时候 持久使用淘宝源 设置:
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
或
npm info express
‘伍’ Gitlab+Jenkins通过钩子实现自动部署web项目，图文详细教程
扩展参考：Jenkins+Gitlab通过脚本自动部署回滚web项目至集群
1）:Gitlab服务器：ubuntu 192.168.152.131 ---参考搭建：Linux安装gitlab，docker安装gitlab教程
2）:Jenkins服务器：ubunu 192.168.152.130 ---参考搭建：linux安装Jenkins，或docker安装Jenkins教程
在服务器上生成ssh-keygen，用于配置web服务器和Gitlab服务器。
3）:web服务器：centos 192.168.152.150 ---已搭建好LNMP环境
4）:开发者电脑：Windows+key密钥 （用于提交代码）
1：在gitlab创建项目Test Project
2.1）： 配置一个开发者电脑的ssh公钥到gitlab
配置一个开发者电脑的ssh公钥到gitlab，这样才能模拟开发上传代码到gitlab。
windows生成key过程及git安装，可参考：Windows下git和github的使用图文详细教程_the丶only的博客-CSDN博客_github win
在windows测试clone，和提交代码。
注：最新版git 已经将默认分支master改为main了。所以看到main，而不是master不要太奇怪
测试成功，在gitlab也显示有index.html文件。
2.2）： 配置jenkins公钥到gitlab
同理，同样需要jenkins公钥，因为jenkins也需要拉去gitlab的代码。
在 jenkins服务器 上查看公钥并复制添加到gitlab，并命名为jekins。
1：插件管理，安装插件
jenkins本身没什么功能，主要是依靠插件来实现各种强大的功能。
基本需要添加的插件：Gitlab Hook、Build Authorization Token Root、Publish Over SSH、Gitlab Authentication、Gitlab、Git Parameter
可以在 Manage Jenkins >> Manage Plugins 查看管理插件。在Available 选项搜索安装插件即可。
安装完成后，重启Jenkins。
2：添加需要部署的web主机
在 Manage Jenkins >> Configure System 中往下翻，找到 Publish over SSH 选项，点击add ssh server。
在Jenkins服务器上，查看私钥，注，是私钥，不是公钥。
将私钥填写在key位置，还有添加web服务器相关信息。
注：如果测试报错如下
Failed to connect or change directory
jenkins.plugins.publish_over.BapPublisherException: Failed to add SSH key. Message [invalid privatekey: [B@2e54414f]
是因为默认用ssh-keygen命令，默认生成了OPENSSH 格式密钥。而Jenkins暂时不支持这种私钥，私钥开头结尾如下：
所以，需要生成rsa密钥格式的。用开头说的ssh-keygen加其他参数生成即可。
私钥开头结尾如下：
再次测试，显示success，则成功。然后点击save保存即可。
3：构建任务项目
首页创建任务或者一个项目
命名为web-project，选择为freestyle project 自由项目。然后ok确认。
3.1）：源码管理 Source Code Management
选择源码管理，添加gitlab的项目clone地址。
注：最后路径选择分支，我gitlab主分支名字为main,如果是master，则写master，或者合并的其他分支。
在add添加用户
添加完成后，选择git用户，这时没有红色提醒，说明已成功连接
3.2）：构建触发器 Build Triggers
现在Build Triggers，勾选build when....，其他默认，并记下链接 http://192.168.152.130:8080/project/web-project
点击高级 advance 选项。
勾选filter branches regex选择，填写分支，生产token。其他默认
3.3）：构建 Build
选择Build 选项。选择ssh
添加web服务器
添加完毕，最后save保存。
1：添加钩子webhooks.
选择自己的项目Test Project，在设置setting里，选择钩子webhooks.
填写刚才记下的http://192.168.152.130:8080/project/web-project和token值。
最后Add webhook完成：
2：如添加失败，报错，更改Network
注：如填写失败提示Url is blocked: Requests to the local network are not allowed
还需更改Network选项。
3：测试钩子
添加完成后，下面会出现钩子选择。点击test中的，push event。
出现successful，即添加成功。
在Jenkins也可以看到刚才的测试时间信息。
在开发电脑上测试提交，我这里为Windows电脑测试。
打开Git Bash，输入以下命令：
提交成功，回到Jenkins，查看是否构建成功：
绿色显示构建成功，无错误显示。回到gitlab查看项目。
时间显示刚才也提交成功，无错误。最后在浏览器输入web地址测试，本人配置了web访问端口8082。所以输入IP加端口访问。
内容也已经自动更新成功。
完结撒花！！！