阿里云服务器(Centos 7)上部署自己在Windows下开发的Vue项目(Docker版,超简单!)

一、安装Docker

Docker要求CentOS系统的内核版本高于3.10(一般情况下你买的阿里云都是支持的哈),来验证你的CentOS版本是否支持 Docker 。

  1. 通过 uname -r 命令查看你当前的内核版本
$ uname -r
  1. 使用root权限登录Centos。确保yum包更新到最新。
$ yum update
  1. 卸载旧版本(如果安装过旧版本的话,没有请省略)
$ yum remove docker  docker-common docker-selinux docker-engine
  1. 安装需要的软件包, yum-util 提供yum-config-manager功能,另外两个是devicemapper驱动依赖的
$ yum install -y yum-utils device-mapper-persistent-data lvm2
  1. 设置yum源
$ yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
  1. 可以查看所有仓库中所有docker版本,并选择特定版本安装
$ yum list docker-ce --showduplicates | sort -r
  1. 安装docker
$ yum install docker-ce
  1. 启动并加入开机启动
$ systemctl start docker
$ systemctl enable docker
  1. 验证安装是否成功(有client和service两部分表示docker安装启动都成功了)
$ docker version

在这里插入图片描述
至此Docker准备工作完成

二、创建一个新容器并启动nginx服务器

$ docker run --name zzz-nginx -itd --restart always -p 9110:80 -v /root/test/zzz-nginx/dist:/usr/share/nginx/html nginx

命令解释说明:

  • docker run: 启动一个docker容器。
  • --name: 为这个容器取一个名字,比如此处取的名字是zzz-nginx
  • -p: 端口映射,连接服务器的9110端口(端口你随便起,喜欢哪四个数就用哪四个数哈,1234 2234你喜欢就好)与容器的80端口,这样就能够通过"服务器ip:9000"直接访问容器了。
  • --restart always: 这个配置选项能够在容器在意外崩溃后再次启动起来,用来防止周末被老板叫回去加班,建议加上。
  • -v: 路径挂载。将容器外部的路径与容器内部的路径给“连接”在一起。比如,这里的/root/test/zw-nginx/dist就是容器外部(也就是服务器里的)路径,而/usr/share/nginx/html就是进入容器后,容器里的路径。从此这两个被绑定在一起的路径就是亲兄弟了,一起吃肉,一起喝酒,所有文件都共享。若原路径不存在则会被docker自动创建。

这条命令运行之后,我们就创建了一个拥有nginx的docker容器了!!!

我们可以通过以下命令查看一下,我们的容器是不是成功创好了。

$ docker ps

这个命令我们能够查看到各个容器的ID、名字、端口映射等信息。
在这里插入图片描述
可见我们的zzz-nginx容器已经创好了

如果需要查看所有容器,不管是否正在运行,则加上-a即可:

$ docker ps -a

我们可以再看看刚才的路径挂载信息:

$ docker inspect zzz-nginx(你的容器名) | grep Mounts -A 20

在这里插入图片描述
说明已经成功进行路径挂载了。

三、使用SFTP工具将Vue打包好的代码传入服务器

本文以WinSCP这个软件为例:
在这里插入图片描述
直接将我们的vue项目在windows下npm run build打包,会生成一个dist文件夹,再将dist文件夹里面的内容,直接拖到阿里云服务器的刚刚设置挂载的路径下即可
在这里插入图片描述

四、进入docker修改配置文件以获取后台api

  1. 进入docker的命令
$ docker exec -it zzz-nginx(你的容器名) /bin/bash

在这里插入图片描述
2. 进入docker之后,进入如下路径

$ cd /etc/nginx/conf.d/

在这里插入图片描述
这个default.conf就是我们要修改的配置文件,但是!!!docker里没有自带vi和vim,我们需要自行安装………………

$ apt-get update
$ apt-get install vim

然后才可以用vim打开这个default.conf文件

$ vim default.conf

在这里插入图片描述
把框红框的部分的api的url改成你自己项目的后端接口url就可以了!!!
前提是你的前端是
在这里插入图片描述
这样式儿的哈,因为那个location /api的意思是匹配所有以/api 开头的地址。

五、打开您的网站吧!

http://阿里云服务器IP:9110(您刚刚设置的您喜欢的端口号)
在这里插入图片描述

参考资料:

https://www.cnblogs.com/yufeng218/p/8370670.html 感谢风止雨歇作者

https://mp.weixin.qq.com/s?__biz=MzI1MzYxMzM3Mg==&mid=2247483710&idx=1&sn=300a51b2963e884cbf5862b75edada2d&chksm=e9d0856ddea70c7bb5c7bff890fb7b19c9708eee7dc22144416db4dec82b9f9cbd1290a77c78&token=463138875&lang=zh_CN#rd 感谢401英俊的丰丰!

猜你喜欢

转载自blog.csdn.net/qq_32755875/article/details/111992851