基于阿里云 Vue+docker+niginx前端项目部署

1.首先，将项目打包

npm run build

可以看到文件夹中多了一个dist文件

然后在根目录下创建两个文件，一个命名为Dockerfile，一个命名为default.conf。

2.在阿里云上安装nginx

首先需要在你的阿里云中安装好docker，具体过程这边就不详细讲解了，大家可自行百度。安装完之后可以使用docker version查看docker是否安装成功
接下来我们使用docker的方式去安装nginx。
1.查找nginx

docker search nginx

2.下载nginx

docker pull nginx

3.将Vue项目部署到阿里云中

做好了准备工作，接下来我们终于要开始部署了，这里使用的是xftp加xshell两个工具来上传文件，小伙伴们也可以使用rz将本地的Vue文件上传到阿里云中。
我们把压缩包上传到home目录下，可以使用ls查看文件是否上传成功，然后使用unzip xx.zip（xx是压缩文件的名称）将文件解压。

可以用xftp查看到文件已解压，当然你也可以在home目录下用ls查看。接下来我们cd docker-vue进入项目文件，用ls查看一下。

接下来我们先来编辑Dockerfile里面的内容，使用vi Dockerfile打开文件进行编辑。

FROM nginx:latest
MAINTAINER lalala
COPY dist/ /usr/share/nginx/html/ 

第二行可以写作者名称，第一行和第三行不用改。
然后编辑一下default.conf里的内容，vi default.conf进入文件进行编辑。

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

这边监听的是80端口，后面配置的时候将会用到。

然后创建自己的镜像

docker build -t docker-vue .

docker是创建的镜像的名字。
后面有一个.注意不要漏掉！！！
后面有一个.注意不要漏掉！！！
后面有一个.注意不要漏掉！！！

可以查看到我们刚刚创建的镜像

我们现在开始创建容器。

docker run -d --name xx -p 8080:80 xxx

–name xx 填写创建的容器名称，xxx填写镜像的名称，我们这边都写docker-vue

可以用docker ps -a查看正在运行的容器。

可以看到我们创建的docker容器已经在运行了，然后打开浏览器输入你阿里云的公网地址加8080端口号就可以访问了。
记得配置一下安全组，开放8080端口。