使用Docker部署 vue 项目 （vue + docker + nginx）

在日常的开发与学习中，只会写不会部署显然是不行的，要把自己写的东西搭建到服务器上能供别人使用才是一名合格的开发，也是一名前端工程师必备的一项技能，网上搜索会有不少的教程，但是大多都是复制粘贴，略微粗糙，坑不少，所以自己整理一份出来，从服务器购买，工具使用，打包到部署一整套流程，希望对大家有所帮助

1.购买服务器

在这里我们采用购买阿里云的服务器https://developer.aliyun.com/plan/grow-up 进入后，右上角登录，建议大家用支付宝扫码登录（没有的先注册按照流程走就行），登录后，直接购买选择ecs服务器就好，首页就可以看到ecs服务器的购买地址。 在这里要说一下预装环境的选择，因为大部分服务器都是linux系统,在这里我们选择linux，购买成功后会发送短信到你手机。

购买成功后，在当前页点击右上角控制台进入安全组配置要访问的端口

2.工具准备（Xshell）

此工具是收费的，在这里我们使用家庭和学校的版本，免费，输入名称和邮箱选择Xshell Only,会发邮件到你的邮箱 靠链接下载软件即可

打开后点击这里添加会话

输入公网ip

输入用户名

输入密码

连接即可

3.项目打包

创建vue项目步骤省略，网上有很多教程

通过npm run build打包

4.开始部署

进入Xshell

1. 建立一个文件夹 ：mkdir 文件夹名 如：

   mkdir study

2. 查看是否成功

   ls

3. 进入到创建的文件夹中 cd 文件夹名 如：

   cd study

4. 安装docker 指令：

   yum install -y docker-engine

5. 查看是否安装成功 指令：

   docker version

6. 启动docker 指令：

   systemctl start docker

7. 查看启动状态 指令：

   systemctl status docker

   

8. 获取nginx镜像 指令：

   docker pull nginx

9. 启动docker中的Nginx容器，命名为nginx-test，并将服务器的8080端口和容器的80端口映射。 指令：

   docker run -p 8080:80 --name nginx-test nginx

   

   如果页面出现**Welcome to nginx!**到一步你已经成功一半了！要是没有出来 查看在安全组是否配置了要访问的端口，第一部分购买服务器部分。
10. 在第一步创建的文件夹中创建文件 default.conf 和 Dockerfile指令 touch default.conf 和 touch Dockerfile

    

11. 创建好后编辑第一个文件default.conf ，指令

    vim default.conf

    

    出来这里后直接回车，将之下内容粘贴进去：（注意：要是粘贴不进去先按下键盘的 i 键）

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;
    }    
}       

           

1. 编辑第二个文件Dockerfile ，指令

   vim Dockerfile

FROM nginx

MAINTAINER zouzou

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/
           

注意：这里编辑两个文件文件的方法是一致的 把内容粘贴进去就可以，编辑完成后要退出的话 按键盘esc然后输入一个

：wq!

回车就行

1. 接下来把咱们打好的vue包，也就是压缩后的那个dist.zip拖到Xshell中，直接拖过来，会有进度显示，要是进度条不动，先下载个lrzsz 指令：

   yum -y install lrzsz

   ，然后在拖进来就没问题

   

   拖进来后ls显示就是这样

   

2. 接下来解压dist.zip 指令:

   unzip dist.zip

   

3. 好了后，构建docker镜像 指令：

   build -t 镜像名称 .

   如：

   docker build -t zz-mms .

   (注意后面的 . 一定不能少)
4. 查看是否创建成功 指令：

   docker images

   

   到这里我们的vue应用镜像已经创建成功，接下来，我们基于镜像启动一个docker容器，也是最后一步

   docker run -d -p 端口名:80 --name 容器名 刚才建立的镜像名称

   如：

   docker run -d -p 9090:80 --name mms zz-mms

   接下来我们查看下启动的容器

   docker ps

   

   *好啦，到这里已经部署成功啦~我们来访问看一看

   

   没有问题！！！

总结

我这里的步骤写的相对繁琐，就是为了避免大家采坑，每一步都是拆分到最细，大家在部署过程中只要照着一步一步来肯定是没有问题的，有不清楚的地方可以留言问我~祝愿大家都能搭建出来自己的项目