docker使用Nginx部署Vue项目（云服务器）

docker拉取nginx镜像

# 拉取镜像
docker pull nginx
# 查看镜像
docker images

docker启动nginx测试镜像

#启动镜像
docker run --name nginx-test -p 8081:80 -d nginx:latest
# 查询容器
docker ps

根据自己的ip+端口号就可以访问了，我这边的端口号是8081，注意一定要去自己的云服务器开一下端口号（linux的话要关闭一下防火墙）

随便拉取一个vue项目

我这里拉取的是现成的花裤衩，先下载依赖，跑项目，一定保证项目正常运行

https://gitee.com/panjiachen/vue-admin-template.git

输入npm run build:prod 进行打包vue项目

npm run build:prod

在这里我的打包项目命令是npm run build:prod，看自己项目打包命令是什么，一般在这里：

在项目中查看是否有dist文件，有表示打包成功了

将这个dist拖到服务器中任何位置，我这里拖到opt下

首先进去opt文件

# 进去文件夹
cd /opt

# 查看文件
ll

在opt文件夹输入命令创建并编辑default.conf文件

vi default.conf

将一下以下代码放到代码块中

server {
    listen       80;
    server_name  你的ip;
 
    #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;
    #}
}

在opt文件夹输入命令创建并编辑Dockerfile文件

vi Dockerfile

将一下以下代码放到代码块中

# 使用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/

生成项目docker镜像文件（务必要进入opt文件中）

docker build -t vue-xsp .
#（注意最后的一点要记得输入，英文的点）

启动生成的docker镜像

docker run -d --name vue-xsp-run -p 8088:80 vue-xsp
docker ps

输入自己的ip+端口号就可以访问项目

注意一定要去自己的云服务器开一下端口号（linux的话要关闭一下防火墙）

在手机上也可以正常访问

最后提醒一下，如果说你部署的是自己本地虚拟机和本地id那么在手机或者别人访问是访问不了的，这不是你部署的有问题，只是你ip未通