docker+nginx快速部署vue项目
1. 环境信息
1.1. 前端开发工具:JetBrains WebStorm 2019.2.4 x64
1.2. 服务器文件传输软件:WinSCP
1.3. 服务器连接软件:Xshell
1.4. node.js版本: v12.13.0
1.5. vue-cli版本: v4.4.6
1.6. vue 版本:2.9.6
1.7. 服务器系统:CentOS 7.6 64bit
2.docker安装测试nginx
2.1docker拉取nginx镜像
1.docker pull nginx
2.docker images
2.2docker启动nginx测试镜像
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项目
vue init webpack vue-demo
3.3用webstorm打开创建的项目并初始化依赖包
3.4输入npm run dev命令运行查看vue项目
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文件夹
cd /opt/
ls -l
4.3在opt文件夹输入命令创建并编辑default.conf文件
1.vi Dockerfile
2.进入文件界面里,按下键盘 i 按键 ,切换到编辑界面,复制如下代码块;
3.按下键盘 esc 按键,退出编辑界面;
4.同时按下 shift + : ,再输入wq,保存并退出文件界面;
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文件
1.vi Dockerfile
2.进入文件界面里,按下键盘 i 按键 ,切换到编辑界面,复制如下代码块;
3.按下键盘 esc 按键,退出编辑界面;
4.同时按下 shift + : ,再输入wq,保存并退出文件界面;
# 使用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镜像文件
docker build -t vue-demo .
(注意最后的一点要记得输入,英文的点)
4.6启动生成的docker镜像
docker run -d --name vue-demo-run -p 8088:80 vue-demo
docker ps