头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

SVN环境搭建

2021-08-24
#SVN

最近有个项目，要把界面搭建在web服务器上，同时支持通过SVN上传修改代码同步界面，因此学习一下SVN搭建过程，跟着我一起来学习吧~

一、SVN下载地址

Subversion（SVN）它是一个自由/开源的版本控制系统，一组文件存放在中心版本库，记录每一次文件和目录的修改，SVN允许把数据恢复到早期版本，或是检查数据修改的历史，它可以通过网络访问它的版本库，从而使用户在不同的电脑上进行操作。

SVN包含两部分，SVN服务端和SVN客户端，最好两部分搭配使用，下载地址如下：

二、SVN服务器安装及使用方法

2.1 VisualSVN安装

第一步：首先要下载SVN服务端，下载地址：https://www.visualsvn.com/server/download/，根据系统选择对应的版本。

第二步： 双击安装程序 VisualSVN-Server-4.3.4-x64.msi
Image3.png

第三步：勾选“I accept…”，然后单击“Next”
Image4.png

第四步：使⽤默认配置，点击Next
Image5.png

第五步：设置服务器的安装路径、资源的存放⽬录及端⼝
Image6.png

Location是你的安装目录，C盘或D盘都可以，我选择存放在D盘，Repositories是你的源代码仓库，也就是你SVN帮你管理代码放置的位置，这里我选择放置在E盘。

第六步：使⽤默认配置，点击Next
Image7.png

第七步：使⽤默认配置，点击Next

Image8.png

第八步：点击install进行安装：

Image9.png

等待安装
Image10.png

第九步：安装完成后可勾选复选框，然后选择 Finish完成安装
Image11.png

SVN服务端界面显示如下：
Image12.png

2.2 VisualSVN使用方法

2.2.1 创建版本库

第一步：右键-“create new Repository”
Image13.png

第二步：使⽤默认配置，进入下一步
Image14.png

第三步：创建版本库的名称，进入下一步
Image15.png

第四步：选择【Single-project repository】，创建trunk，branches, tags三个文件夹，三个目录表示主杆、分枝、存档。
Image16.png

第五步：使⽤默认配置，进行创建
Image17.png

第六步：创建完成，我们可以看到我们的版本库中自动帮我们创建了trunk，branches, tags三个文件夹
Image18.png
Image19.png

2.2.2 创建用户

第一步：选中Users用户组，右键单击，选择Create User或者新建->User
Image20.png

第二步：填写Username和password后，点击ok按钮
为方便记忆，密码先统一设置为123456
Image21.png

第三步：创建完成显示如下
Image22.png

2.2.3 创建分组

第一步：选中Groups用户组，右键单击，选择Create Group或者新建->Group,如图:
Image23.png

第二步：创建一个开发组，将刚刚创建的用户添加到该组中，点击ok按钮
Image24.png

第三步：创建完成显示如下
Image25.png

2.2.4 给版本库设置权限

第一步：在faqRepository上单击右键,选择属性Properties
Image26.png

第二步：设置权限，你可以按组来设置，也可以按个人来设置，设置完成点击确定即可
Image27.png

2.2.5 将本地文件导入到SVN服务器

第一步：首选需要过滤不必要上传到svn服务器的文件和文件夹。进入源码目录，在空白出点击右键，选择【TortoiseSVN】，选择【设置】，选择【常规设置】，在【Subversion】下的【全局忽略样式】中输入要忽略的文件夹名称及文件名称，以空格分隔。注意：此处建议忽略.temp、.vscode、node_modules等文件
Image28.png

第二步：打开VisualSVN Server Manager，选择版本库【demo1-mvcone】，选择【trunk】，在【trunk】上点击右键选择【Copy URL to Cliboard】，将版本库主杆地址copy到剪贴板。
Image29.png

第三步：进入本机源码所在的目录，右键菜单，选择【TortoiseSVN】，选择【导入…】
Image30.png

第四步：在版本库URL输入框里粘贴版本库地址，填上导入信息，强烈建议每次提交都填入导入信息，便于看日志做了哪些更改
Image31.png

第五步：输入svn server版本库demo1-mvcone的用户名和密码，点击确定开始上传
Image32.png

第六步：等待上传，完成上传
Image33.png

注意：我们可以看到本次完成上传的时间是11分钟，耗时太久，浪费时间，因此，此处建议不要上传.temp、.vscode、node_modules等文件，因为耗时太久、可以先将源码更新下来再在本地npm install进行手动更新需要加载的模块，这样可以提高上传下载效率

第七步：修改ignore文件、重新上传
Image34.png
Image35.png

第八步：刷新服务端，我们可以看到我们的代码已经上传到服务端了，可以开始进行客户端操作了
Image36.png

2.2.5.1. 遇到的问题

注意：我在其他环境种导入代码遇到了如下问题：

1. 不知道这样的主机
Image37.png

Image38.png

原因： 地址https://e2jdkdwwxx01/svn/faqRepositories/trunk 中e2jdkdwwxx01是虚拟机的名字
解决方法： 是把地址中“e2jdkdwwxx01”改成虚拟机的IP地址的形式，查询虚拟机IP地址方法是输入cmd打开命令提示符，再输入ipconfig，回车， IPv4地址即虚拟机的IP地址

将地址改成https://10.30.4.89/svn/faqRepositories/trunk，即可继续上传
Image39.png

此外，如果我们想修改我们的端口号，我们可以通过->右键->properties-Network来修改我们想要的端口号
Image40.png

Image41.png

2. 提示证书认证失败的问题
解决办法： 直接选择“永久接受凭证”或者“接受凭证”即可
Image42.png

输入SVN中设置的用户名和密码即可完成上传
Image43.png

Image44.png

打开服务器的VisualSVN，即可看到我们的代码已经更新到SVN服务器中了
Image45.png

三、SVN客户端安装及使用方法

3.1 TortoiseSVN安装

第一步：首先要下载SVN客户端，下载地址：https://tortoisesvn.net/downloads.zh.html ，根据系统选择对应的版本。

第二步： 双击安装程序 TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi
Image3-1.png

第三步：进入版权信息页面，直接点击Next
Image3-2.png

第四步：选择安装位置和需要的特性，默认，一般直接点击Next即可（你也可以根据自己的需求进行选择安装），具体想安装在哪个盘可以自定义
Image3-3.png

第五步：进入到安装界面，点击Install开始安装
Image3-4.png

第六步：点击Install后，进入到安装界面，可以看到安装的进度条，耐性等待哦
Image3-5.png

第七步：选上，更新日志，可以查看更新的版本详细信息，也可以不够选，点击Finish完成安装
Image3-6.png

3.2 安装TortoiseSVN汉化包

第一步：双击【LanguagePack_1.14.1.29085-x64-zh_CN.msi】安装TortoiseSVN汉化包。

Image3-7.png

Image3-8.png

第二步：安装完成后，在资源管理器空白处单击鼠标右键，就可以看到汉化版的TortoiseSVN菜单。
Image3-9.png

第三步：选择 【Settings】，将General选项的Language设置为【简体中文】,【确定】后菜单文都变成中文的了。
Image3-10.png

Image3-11.png

3.3 TortoiseSVN使用方法

3.3.1 下载源码到本地

第一步：在本地新建文件夹，右键SVN检出
Image3-12.png

第二步：填写版本库URL，导出源码
https://lichang.supcon.com/svn/faqRepositories/trunk
Image3-13.png

第三步：等待导出完成，导出完成，此时导出的代码为最新的源码版本
Image3-14.png

注意：如果我们之前有进行过版本库检出，后续要修改代码直接 -> 右键 -> SVN更新（SVN update），将代码更新到最新版即可

第四步：这个时候我们可以看到文件目录中已经把源码下下来了，左下角的绿色小图标代表此时文件状内容和服务器中的源码保持一致
Image3-15.png

第五步：打开终端，进入到代码目录，输入npm install
Image3-16.png

即可看到我们的目录中重新加载了node_modules
Image3-17.png

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。

第六步：接下来输入口令：yarn docs:dev
注意：如果不执行第五步，直接执行第六步就会报错哦
Image3-18.png

完成第五步第六步，输入口令：yarn docs:dev，即可运行程序显示界面
Image3-19.png
Image3-20.png
Image3-21.png

3.3.2 文件上传（SVN commit）

当我们编写完我们想要更新的文件，想要将其上传到服务器中，那么，你要了解接下来的一系列操作。

第一步：我们可以看到，未被修改过的文件显示绿色对号，修改过未上传的文件会被标注红色叹号，新创建的文件左下角没有标识
Image3-22.png

第二步：找到需要上传的文件或文件夹，点击右键，选中SVN提交（SVN commit）

我们可以单独提交某个文件
Image3-23.png

也可以提交整个文件夹
Image3-24.png

选中所要上传的文档，并填写commit message来记录上传内容
Image3-25.png

提示提交成功则完成代码提交
Image3-26.png

提交完成可以看到我们的图标已经变成了绿色对号
Image3-27.png

3.3.3 查看更新内容（show log）

我们可以 -> 右键 -> TortoiseSVN -> 显示日志 查看文档更新的内容

Image3-28.png

双击修改文件，可以查看修改细节，参考下图：

Image3-29.png

Image3-30.png

3.3.4 设置钩子，使得VisualSVN Server可以自动发布配置部署svn代码到web目录服务器上线

SVN钩子有很多种：

  • post-commit 在提交完成成功创建版本之后执行该钩子，提交已经完成，不可更改。
  • pre-commit 提交完成前触发执行该脚本
  • start-commit 在客户端还没有想服务器提交数据之前，及没有建立Subversion transaction 之前。

仓库->右键->Properties->Hooks，添加一个post- commit文件；当有commit动作发生时（提交到SVN Server时）就会执行这个post-commit文件，在该文件实现数据的复制。
Image3-31.png

适用条件：
SVN Server与测试用的Web Server在同一台Windows系统服务器上，SVN Server使用的是VisualSVN，Web Server使用的是Apache。项目的名称为faqSVN，客户端使用TortoiseSVN。首先创建一个文件夹，进行checkout，输入需要用户名和密码，将test项目取出到该文件夹中。
Image3-32.png

找到SVN Server的Repositories目录，在Repositories/test/hooks文件夹中创建post-commit.bat，在其中写入命令：

"C:\Program Files\VisualSVN Server\bin\svn.exe" update "D:\www\test" --quiet --username name --password pwd（即执行svn update命令，请自行替换用户名和密码）

Image3-33.png

也可以这样写

@echo off
SET REPOS=%1
SET REV=%2
SET DIR=%REPOS%/hooks
SET PATH=%PATH%;
SET WORKING_COPY=C:\lichang\faqSVN
“C:\Program Files\VisualSVN Server\bin\svn.exe” update %WORKING_COPY% –username admin –password 123456

Image3-34.png
注意：修改完钩子文件，我们需要重启一下VisualSVN
Image3-35.png

post-commit文件设置完成后，我们可以测试一下，当我们在客户端提交SVN文件的时候,VisualSVN Server会通过这个钩子文件，将SVN中更新的内容自动update到我们本地部署的faqSVN文件夹中

Lililich's Blog
66Article 38Tags 13Categories