docker通过nginx快速部署vue项目（docker + nginx + vue）

docker+nginx快速部署vue项目

1.环境信息
2.docker安装测试nginx
2.1docker拉取nginx镜像
2.2docker启动nginx测试镜像
3.在win10环境里创建并打包vue项目
3.1打开cmd窗口，进入对应文件夹
3.2输入vue init webpack <项目名>创建vue项目
3.3用webstorm打开创建的项目并初始化依赖包
3.4输入npm run dev命令运行查看vue项目
3.5输入npm run build 打包vue项目
3.6在项目根目录下查看打包完成的dist文件夹
4.在centos7系统服务器里部署vue项目
4.1用WinSCP连接服务器，把dist文件夹拉取到服务器的opt文件夹下
4.2用Xshell连接服务器，输入cd /opt/命令进入opt文件夹
4.3在opt文件夹输入命令创建并编辑default.conf文件
4.4在opt文件夹输入命令创建并编辑Dockerfile文件
4.5生成项目docker镜像文件
4.6启动生成的docker镜像
4.6输入地址访问项目

• 1. 环境信息

 2. 前端开发工具：JetBrains WebStorm 2019.2.4 x64
 3. 服务器文件传输软件：WinSCP
 4. 服务器连接软件：Xshell
 5. node.js版本： v12.13.0
 6. vue-cli版本: v4.4.6
 7. vue 版本：2.9.6
 8. 服务器系统：CentOS 7.6 64bit
 9. 

•  2.docker安装测试nginx

• 2.1docker拉取nginx镜像

```bash
1.docker pull nginx
2.docker images
```
**2.2docker启动nginx测试镜像**

```bash
1.docker run --name nginx-test -p 8081:80 -d nginx:latest
2.docker ps
3.输入地址访问nginx欢迎页面
```

• 3.在win10环境里创建并打包vue项目

**3.1打开cmd窗口，进入对应文件夹**
**3.2输入vue init webpack <项目名>创建vue项目**

```bash
vue init webpack vue-demo
```


**3.3用webstorm打开创建的项目并初始化依赖包**

**3.4输入npm run dev命令运行查看vue项目**

```bash
npm run dev
```

**3.5输入npm run build 打包vue项目**
**3.6在项目根目录下查看打包完成的dist文件夹**

• 4.在centos7系统服务器里部署vue项目

**4.1用WinSCP连接服务器，把dist文件夹拉取到服务器的opt文件夹下**
**4.2用Xshell连接服务器，输入cd /opt/命令进入opt文件夹**

```bash
cd /opt/
ls -l
```
**4.3在opt文件夹输入命令创建并编辑default.conf文件**

```bash
1.vi Dockerfile
2.进入文件界面里，按下键盘 i 按键 ，切换到编辑界面，复制如下代码块；
3.按下键盘 esc 按键，退出编辑界面；
4.同时按下 shift + : ,再输入wq，保存并退出文件界面；
```

```java
server {
    listen       80;
    server_name  121.36.156.54;

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

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

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}
```
4.4在opt文件夹输入命令创建并编辑Dockerfile文件

```bash
1.vi Dockerfile
2.进入文件界面里，按下键盘 i 按键 ，切换到编辑界面，复制如下代码块；
3.按下键盘 esc 按键，退出编辑界面；
4.同时按下 shift + : ,再输入wq，保存并退出文件界面；
```
```java
# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER samxie
# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/
```
**4.5生成项目docker镜像文件**

```bash
docker build -t vue-demo .
（注意最后的一点要记得输入，英文的点）
```
**4.6启动生成的docker镜像**

```bash
docker run -d --name vue-demo-run -p 8088:80 vue-demo
docker ps
```
**4.6输入地址访问项目**

原创作者地址：[docker通过nginx快速部署vue项目](https://blog.youkuaiyun.com/SAM_XIE_52/article/details/107404258)