vue部署

部署vue 项目

1.购买服务器

重置服务器实例密码

2. 远程连接服务器

安装 findlshell
连接服务器

3.CentOS7.5 安装docker

Docker 支持以下的 64 位 CentOS 版本：

CentOS 7
CentOS 8
更高版本...

1. 卸载旧的版本

较旧的 Docker 版本称为 docker 或 docker-engine 。如果已安装这些程序，请卸载它们以及相关的依赖项。

$ sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

2. 安装 Docker Engine-Community

(1) 使用 Docker 仓库进行安装

在新主机上首次安装 Docker Engine-Community 之前，需要设置 Docker 仓库。之后，您可以从仓库安装和更新 Docker。

设置仓库

安装所需的软件包。yum-utils 提供了 yum-config-manager ，并且 device mapper 存储驱动程序需要 device-mapper-persistent-data 和 lvm2。

$ sudo yum install -y yum-utils  device-mapper-persistent-data  lvm2

使用以下命令来设置稳定的仓库。

$ sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo

(2) 安装 Docker Engine-Community

安装最新版本的 Docker Engine-Community 和 containerd，或者转到下一步安装特定版本：

$ sudo yum install docker-ce docker-ce-cli containerd.io

如果提示您接受 GPG 密钥，请选是。

(3) 可选：安装指定版本的docker

要安装特定版本的 Docker Engine-Community，请在存储库中列出可用版本，然后选择并安装：

1、列出并排序您存储库中可用的版本。此示例按版本号（从高到低）对结果进行排序。

$ yum list docker-ce --showduplicates | sort -r

docker-ce.x86_64  3:18.09.1-3.el7                     docker-ce-stable
docker-ce.x86_64  3:18.09.0-3.el7                     docker-ce-stable
docker-ce.x86_64  18.06.1.ce-3.el7                    docker-ce-stable
docker-ce.x86_64  18.06.0.ce-3.el7                    docker-ce-stable

2.通过其完整的软件包名称安装特定版本，该软件包名称是软件包名称（docker-ce）加上版本字符串（第二列），从第一个冒号（:）一直到第一个连字符，并用连字符（-）分隔。例如：docker-ce-18.09.1。

$ sudo yum install docker-ce-<VERSION_STRING> docker-ce-cli-<VERSION_STRING> containerd.io

3. 启动 Docker

$ sudo systemctl start docker

4. 通过运行 hello-world 映像来验证是否正确安装了 Docker Engine-Community 。

$ sudo docker run hello-world

4.CentOS7.5基于docker安装nginx

1. 查看docker已经下载的(已有的)镜像

请忽略我已下载好的nginx镜像

2. 去官方公有仓库查询nginx镜像

其中第一个就是nginx官网镜像，且STARS最多，我们这次就用这个

3. 拉取该镜像

因为我之前拉取过，所以后面的输出和第一次拉取的输出不是太一致

4. 再次查看本地镜像

此时，就看到本地有了该镜像

5. 启动一下该镜像，使用nginx服务，代理本机8080端口(测试是不是好使)

-d: 后台运行
-p: 端口映射冒号前是本机端口，冒号后是容器端口

访问本机ip:8080 即可访问该页面，代表nginx启动成功

6.关闭容器

docker stop XXXXX(容器id前几位)

not end

至此简单的docker安装nginx并启动算是成功了，接下来就会产生一个疑问，如果我想修改nginx的配置怎么办，我想更改nginx中的资源文件怎么办？接下来给出一个最实用的办法，就是将容器中的目录和本机目录做映射，以达到修改本机目录文件就影响到容器中的文件。

1.本机创建实例文件夹

/home文件夹下新建mutou文件夹，木头文件夹下新建nginx文件夹，nginx文件夹下新建conf.d文件夹，html文件夹，大致结构如下：

/home
    |---mutou
           |----nginx
                  |----conf.d
                  |----html

2. 在conf.d文件夹下新建default.conf文件，内容如下：

server {
    listen       80;
    server_name  localhost;
    # 原来的配置，匹配根路径
    #location / {
    #    root   /usr/share/nginx/html;
    #    index  index.html index.htm;
    #}
    # 更该配置，匹配/路径，修改index.html的名字，用于区分该配置文件替换了容器中的配置文件
    location / {
        root   /usr/share/nginx/html;
        index  index-test.html index.htm;
    }
}

3.在html中编写index-test.html，用以判断文件夹映射成功，内容如下：

<html>
  <body>
    <h2>it is html1</h2>
  </body>
</html>

4. 启动nginx(8080)，映射路径

命令比较长，其实就是多加了两个参数，-v，-v的意思就是冒号前面代表本机路径，冒号后面代表容器内的路径，两个路径进行了映射，本机路径中的文件会覆盖容器内的文件。
nginx容器内的一些文件位置：
日志位置：/var/log/nginx/
配置文件位置：/etc/nginx/
项目位置：/usr/share/nginx/html

启动代码如下：

docker run -d -p 8080:80 -v /home/mutou/nginx/conf.d:/etc/nginx/conf.d  -v /home/mutou/nginx/html:/usr/share/nginx/html nginx

5. 验证

此时访问ip:8080，发现展示的不是nginx的默认页面了，而是我们新加入的页面，这样就证明我们两个-v映射的文件夹都起作用了。

image.png

6. 开始反向代理

此时静态页面网站已经部署上了，但是还是会显示一个端口8080出来，就十分不爽，怎么把端口干掉呢？而是换成XXXXX.com/demo1 或者 XXXXX.com/demo2这种效果呢？下面使用nginx的反向代理实现。

7. 增加文件夹，达到下面的效果

/home
    |---mutou
           |----nginx
                  |----conf.d
                  |----html
                  |----conf.d2

我们在conf.d2中配置另一个nginx容器的配置文件，文件内容如下：

server {
    listen       80;
    server_name  localhost;
    location /mutou {
        # 在该位置配置反向代理，将ip/mutou请求拦截，发送给8080端口，如果不是本机请使用公网ip
        proxy_pass   http://你的刚才的ip地址:8080/;
    }
}

8. 再启动一个nginx(80)，专门作为反向代理映射，将本机80端口代理到nginx的80端口上，并映射两端的配置文件地址。

docker run -d -p 80:80 -v /home/mutou/nginx/conf.d2:/etc/nginx/conf.d nginx

此时访问 ip/demo1 即可映射到了ip:8080上，成功完成反向代理。

image.png

9.拓展

当有了反向代理后，自然而然就引出了负载均衡,下面简单实现负载均衡的效果，实现该效果再添加一个nginx，所以要增加一个文件夹。

/home
    |---mutou
           |----nginx
                  |----conf.d
                  |----html
                  |----conf.d2
                  |----html3

html3中的代码如下：

<html>
  <body>
    <h2>it is html3</h2>
  </body>
</html>

10. 启动nginx(8081)

启动命令如下：

docker run -d -p 8081:80 -v /home/mutou/nginx/conf.d:/etc/nginx/conf.d  -v /home/mutou/nginx/html3:/usr/share/nginx/html nginx

11. 访问ip:8081

image.png

12.配置负载均衡，访问ip/demo1时，平均分发到8080端口和8081端口上，即`it is html1`和`it is html3`间接出现。

配置负载均衡，那就是配置在第二次的nginx上，就是反向代理的nginx上，我们去conf.d2文件夹下，修改default.conf文件，如下：

upstream group1{
    server 你的刚才的ip地址:8080;
    server 你的刚才的ip地址:8081;
}

server {
    listen       80;
    server_name  localhost;
    location /demo1 {
        proxy_pass   http://group1/;
    }
}

此时，查看所有运行中的docker容器:docker ps

image.png

然后重启该容器，docker restart 容器id

13. 查看效果

访问ip/demo1，每次刷新页面，页面都会在html1和html3中进行切换，此时负载均衡的效果就实现了。

https://raw.githubusercontent.com/xicunyang/images/master/change-page.gif

14. 配置负载均衡的权重

可以使用下面的配置修改两个端口的权重(即谁被访问的概率大)

upstream group1{
    server 你的刚才的ip地址:8080 weight=1;
    server 你的刚才的ip地址:8081 weight=10;
}

server {
    listen       80;
    server_name  localhost;
    location /demo1 {
        proxy_pass   http://group1/;
    }
}

步骤3：本地创建实例vue项目并上传到github上

0. 确保你的本机电脑是有node环境的，使用下面的命令检查一下

如果没有显示版本号，证明你没有安装node环境，请移步度娘，搜索怎么安装node环境。

0.1 安装好node之后，即得到了npm包管理工具，使用下面的命令检查一下

如果没有显示版本号，请检查原因。

0.2 使用npm包管理工具安装vue-cli脚手架，安装命令如下：

image.png

如果直接使用npm install -global vue-cli安装的时候，会报没有权限的错误，此时在前面加上sudo即可，这是mac系统的解决方案，windows如果有这种情况，请自行查找解决方案。

1. 使用vue-cli生成vue项目

在任意一个文件夹下，使用vue-cli命令生成项目

image.png

2. 进入App.vue组件页面，简单修改

image.png

4. 使用`npm run dev`或者 `yarn dev`启动项目

image.png

5. 浏览器查看修改后的页面

image.png

6. 分享该项目到github上(便于本机修改文件及时更新到服务器上)

image.png

上传的方式有很多种，这里我使用的是我平时比较常用的方法，直接在编辑器(WebStorm)中集成的github。

7. github查看

image.png

此时github上就找到了该项目

8. 此时该步骤暂时结束，接下来就是在服务器上安装git并且登陆上。

步骤4：CentOS7.5安装Git，并拉取代码

1. 登录服务器，并执行安装git的命令

2. 等待一下，安装结束后，检查是否安装成功，出现版本号即代表安装成功

3. git配置

1.配置一个用于提交代码的用户，输入命令：

git config --global user.name "Your Name"

2.配置一个用户邮箱，输入命令：

git config --global user.email "email@example.com"

3.生成公钥和私钥，输入命令后一路回车即可：

ssh-keygen -t rsa -C "youremail@example.com"

该位置的文件稍等会用到

4. 打开github，找到setting

image.png

5. 添加SSH key

image.png

title字段随便填写，Key字段请打开下面的文件，并复制内容粘贴进去。

image.png

然后就成功添加SSH key

5. 在服务器新建目录，拉取项目代码,使用git clone命令

image.png

假如对git命令不太熟悉，请移步:git相关操作记录

6. 至此，服务器端项目代码拉取完毕，接下来在本地编译该代码，生成静态文件

步骤5：CentOS安装node环境，并编译前端项目

1.centos安装node环境

1.下载nodejs最新的tar包

可以在下载页面https://nodejs.org/en/download/中找到下载地址。然后执行指令

$ wget https://nodejs.org/dist/v9.3.0/node-v9.3.0-linux-x64.tar.xz

2,解压包

$ tar -xvf node-v9.3.0-linux-x64.tar.xz

3.部署bin文件

先确认你nodejs的路径，我这里的路径为~/node-v9.3.0-linux-x64/bin。确认后依次执行

$ ln -s ~/node-v9.3.0-linux-x64/bin/node /usr/bin/node
$ ln -s ~/node-v9.3.0-linux-x64/bin/npm /usr/bin/npm

注意ln指令用于创建关联（类似与Windows的快捷方式）必须给全路径，否则可能关联错误。

1. 测试一下

$ node -v

2. 安装yarn(可选)

$ npm install yarn -g
$ ln -s ~/node/node-v9.3.0-linux-x64/bin/yarn /usr/bin/yarn

3. 打包前端项目

进入前端项目目录中，安装依赖

$ npm install
或者是
$ yarn

image.png

4.打包项目

$npm run build
或者是
$ yarn build

5. 检查打包后的静态文件

1.会多了这么个文件夹dist，里面就是打包好的静态文件。

步骤6：将编译后的静态文件放到nginx中

1.第一步，先把原来启动的8080端口的docker容器停止掉

2. 重新运行docker的nginx容器

警告！此时你一定要在项目的根目录中哦，不然的话也可以根据你目前的目录简单调整启动命令。

docker run -d -p 8080:80 -v $PWD/dist:/usr/share/nginx/html nginx

简单说明：$PWD是指的当前路径，上面的警告的意思是启动命令已经规定了是当前项目根目录下的dist文件夹($PWD/dist)，如果不在项目根目录，会出现一些问题。

3.检查刚才的nginx(8080)容器是否启动成功

image.png

可以看到正在运行这时候访问浏览器测试8080端口是否成功部署静态页面。

至此，在CentOS7.5s上使用docker启动nginx并部署前端vue项目的记录暂时结束，下面一篇会简单的优化一点点小细节。

步骤7：增加前端启动命令，简化流程

1.增加前端启动命令

为什么要加上前端的启动命令呢？
我们分析一下：前端代码改动后我们会进行下面几步操作：

git pull 拉取最新代码

yarn build或者npm run build，进行打包

停止原来的nginx容器，启动新的nginx容器（除了第一次启动时外，非必须）

git pull

yarn --registry=https://registry.npm.taobao.org/ && yarn build

#删除容器
docker rm -f demo1 &> /dev/null

#启动容器
docker run -d --restart=on-failure:5\
    -p 8080:80 \
    -v $PWD/dist:/usr/share/nginx/html \
    --name demo1 nginx

这样的话我们可以将这些操作合并在一个sh文件(linux中的)中，以后可能会有更多的命令，都可以放在一起

2.根目录新增文件start.sh，如图，内容见上方

image.png

并随意修改App.vue，使其待会可以判断重启成功

image.png

3.提交代码到git后，服务器git pull拉下来最新代码

image.png

4. 执行启动脚本

$ sh start.sh

image.png

打开页面即可看到页面发生了变化

end

这里简单实用了linux中的sh脚本代替我们频繁重启中额外的操作

问题解决2：当vue路由采用history模式时，访问页面时会出现404找不到现象

以上几个教程里所使用的测试vue项目(demo1)均是十分简单的项目，完全没涉及到router路由或者其他的知识，今天一位小哥将自己的项目部署到nginx后，发现某些页面在访问的时候偶尔会出现404找不到，因此找到我，共同解决了这个问题。在解决过程中，发现这其实也是个老生常谈的问题，最主要就是vue项目的路由采用了history模式，才导致了这个问题。

既然问题已经找到了，那么就应该探究下为什么会出现这个问题：

1.首先我们先理解一下SPA(单页Web应用)的概念：

由于我们是使用vue搭建的单页web应用(SPA)，就是只有一个Web页面的应用，是在打开页面的时候加载单个HTML页面(index.html)，在用户与程序交互的时候动态获取数据(axios)的Web页面程序。

单页面应用程序：
只有在第一次才会向后台请求页面，之后的每次请求都是去获取到必要的数据，由页面上的js解析数据后动态展示到页面上

传统单页面程序：
每次页面的跳转都是去服务器请求页面

因此，单页面应用程序的优势就体现出来了：
减少请求的密度，加快了页面的响应速度，降低了服务器上的压力，有着更好的用户体验，让用户在web app上也能感受到native app的流畅。

2.引出路由

既然是单页面程序，那么我们看到的页面跳转是什么情况呢？一个页面怎么会来回跳转呢？此时就理所应当的引出vue中的重中之重，vue-router（单页面应用程序的路径管理器）。
vue的单页面应用是基于路由+组件的，路由用于设定访问路径，并且将路径与组件进行连接；在传统的多页面应用中，是使用一些超链接<a></a>来进行页面跳转与切换的；而在vue-router中，不是页面的切换，而是组件的切换，所以，路由的本质就是 建立起url和组件之间的映射关系

vue-router的工作原理是什么呢？

SPA(single page application)

:单页面应用程序，其中只有一个完整的页面(index.html)；它在加载页面的时候，不会加载所有页面，而是只更新某个指定的容器中的内容。

单页面应用程序的核心之一就是：更新视图而不重新请求页面；

vue-router在实现单页面前端路由的时候，提供了两种方式：

Hash模式

与

History模式

，根据**mode参数来自由选择采用什么方式。
1. Hash模式
  vue-router默然采用的就是Hash模式---采用URL的Hash来模拟一个完整的URL，于是当URL发生改变的时候，页面不会重新加载。hash(#)是URL的锚点，代表的是网页中的一个位置，单单改变#后面的部分，浏览器只会滚动到相应的位置，而不会去后端请求网页资源，也就是说#是用来指导浏览器动作的，对服务器端完全不起作用，HTTP请求中也不包括#；同时每一次改变#后面的部分，都会在浏览器的访问历史中增加一个记录，当使用浏览器的“后退”按钮的时候，就可以返回上一个位置；所以说Hash模式是使用锚点值的改变，根据不同的值，渲染指定DOM元素的不同数据。
1. history模式
  由于Hash模式中会在URL上自带#，如果不想要很丑的#的话，我们可以使用路由的history模式，只需要在配置路由规则的时候，加入值：mode:'hostory',这种模式充分利用了history.pushState API来完成URL跳转而无需重新加载页面。

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你在使用history模式的时候，URL就会像是正常的URL，没有#存在，比较美观。不过这种模式如果不加以配置的话，会有一个深坑，深坑出现的原因简单介绍一下：

当我们使用history模式的时候进行页面跳转的时候，其vue-router原理是使用HTML5的新接口pushState和replaceState,这两个接口的最大的特点就是改变URL地址，但却不刷新页面，注意！！！仅仅改变网址，网页不是真正的跳转了，也不会获取到新的资源，本质上，网页还是停留在原来的页面(index.html)。

举个栗子🌰：
打开首页后，你的URL显示www.xxx.com/home，这时候能正常显示，没问题，此时你进入到注册页，URL此时是www.xxx.com/home/reg，这个时候，当你点击刷新时，浏览器就会拿着当前的地址www.xxx.com/home/reg去后台请求该资源，后台肯定没有对应的资源，所以就会报404找不到，这样就很明了了！
该怎样解决呢？
栗子🌰中出现的问题，我们可以想想一下，假如一旦浏览器向服务器请求找不到404时，就还跳回到最初的index.html页面，页面再根据URL上的路径跳转到对应的组件里不就好了嘛！事实上，我们就是这么取解决的，在服务器上进行以下相关配置即可解决该问题！
vue-router history后端配置例子

至此，还问题的前因后果已经讲清楚了，以后再遇到类似的问题也会有解决思路了，这样就很好，希望以后一直坚持住！

posted @ 2020-10-12 13:16 昂宿阅读(623) 评论(0) 收藏举报

刷新页面返回顶部

昂宿

前端

vue部署

部署vue 项目

1.购买服务器

2. 远程连接服务器

3.CentOS7.5 安装docker

1. 卸载旧的版本

2. 安装 Docker Engine-Community

(1) 使用 Docker 仓库进行安装

(2) 安装 Docker Engine-Community

(3) 可选：安装指定 版本的docker

3. 启动 Docker

4. 通过运行 hello-world 映像来验证是否正确安装了 Docker Engine-Community 。

4.CentOS7.5基于docker安装nginx

1. 查看docker已经下载的(已有的)镜像

2. 去官方公有仓库查询nginx镜像

3. 拉取该镜像

4. 再次查看本地镜像

5. 启动一下该镜像，使用nginx服务，代理本机8080端口(测试是不是好使)

6.关闭容器

not end

1.本机创建实例文件夹

2. 在conf.d文件夹下新建default.conf文件，内容如下：

3.在html中编写index-test.html，用以判断文件夹映射成功，内容如下：

4. 启动nginx(8080)，映射路径

5. 验证

6. 开始反向代理

7. 增加文件夹，达到下面的效果

8. 再启动一个nginx(80)，专门作为反向代理映射，将本机80端口代理到nginx的80端口上，并映射两端的配置文件地址。

9.拓展

10. 启动nginx(8081)

11. 访问ip:8081

12.配置负载均衡，访问ip/demo1时，平均分发到8080端口和8081端口上，即it is html1和it is html3间接出现。

13. 查看效果

14. 配置负载均衡的权重

步骤3：本地创建实例vue项目并上传到github上

0. 确保你的本机电脑是有node环境的，使用下面的命令检查一下

0.1 安装好node之后，即得到了npm包管理工具，使用下面的命令检查一下

0.2 使用npm包管理工具安装vue-cli脚手架，安装命令如下：

1. 使用vue-cli生成vue项目

2. 进入App.vue组件页面，简单修改

4. 使用npm run dev或者 yarn dev启动项目

5. 浏览器查看修改后的页面

6. 分享该项目到github上(便于本机修改文件及时更新到服务器上)

7. github查看

8. 此时该步骤暂时结束，接下来就是在服务器上安装git并且登陆上。

步骤4：CentOS7.5安装Git，并拉取代码

1. 登录服务器，并执行安装git的命令

2. 等待一下，安装结束后，检查是否安装成功，出现版本号即代表安装成功

3. git配置

4. 打开github，找到setting

5. 添加SSH key

5. 在服务器新建目录，拉取项目代码,使用git clone命令

6. 至此，服务器端项目代码拉取完毕，接下来在本地编译该代码，生成静态文件

步骤5：CentOS安装node环境，并编译前端项目

1.centos安装node环境

2. 安装yarn(可选)

3. 打包前端项目

4.打包项目

5. 检查打包后的静态文件

步骤6：将编译后的静态文件放到nginx中

1.第一步，先把原来启动的8080端口的docker容器停止掉

2. 重新运行docker的nginx容器

3.检查刚才的nginx(8080)容器是否启动成功

步骤7：增加前端启动命令，简化流程

1.增加前端启动命令

2.根目录新增文件start.sh，如图，内容见上方

3.提交代码到git后，服务器git pull拉下来最新代码

4. 执行启动脚本

end

问题解决2：当vue路由采用history模式时，访问页面时会出现404找不到现象

1.首先我们先理解一下SPA(单页Web应用)的概念：

2.引出路由

vue-router的工作原理是什么呢？

公告

(3) 可选：安装指定版本的docker

12.配置负载均衡，访问ip/demo1时，平均分发到8080端口和8081端口上，即`it is html1`和`it is html3`间接出现。

4. 使用`npm run dev`或者 `yarn dev`启动项目