关于docker:docker-nginx运行vue编译后的项目

48次阅读

共计 3642 个字符,预计需要花费 10 分钟才能阅读完成。

前言

最近公司有个 vue 的我的项目,须要本地应用 nginx 启动运行,我感觉应用 docker 正适宜,所以记录下来分享给大家

筹备工作

docker 装置 nginx 镜像


docker pull nginx

编译 vue 我的项目

查看 vue 我的项目 package.json


"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

而后应用如下命令编译到 dist 文件夹下


npm run build

编译之后会生成到 dist 文件夹下,这里咱们会遇到一个问题,先咱们查看 vue.config.js 文件


module.exports = {

publicPath: '/mvue',

runtimeCompiler: true,

这里咱们能够看到,publicPath:’/mvue’,意思就是说生成的 index.html 文件会以 /mvue 为目录,如下所示:


<!DOCTYPE html>

<html lang=en>

<head>

<meta charset=utf-8>

<meta http-equiv=X-UA-Compatible content="IE=edge">

<meta name=viewport content="width=device-width,initial-scale=1">

<link rel=icon href=/mvue/favicon.ico> <link rel=stylesheet href=/mvue/style.css> <script src=/mvue/sso.js>

</script> <title>x7-manage</title>

<link href=/mvue/css/chunk-029a266b.ae198b8f.css rel=prefetch>

<link href=/mvue/css/chunk-0e19dd50.56b34581.css rel=prefetch>

<link href=/mvue/css/chunk-32fbd092.d54e527a.css rel=prefetch>

<link href=/mvue/css/chunk-4fe24ae8.3ad4b2fa.css rel=prefetch>

<link href=/mvue/css/chunk-555e9cec.0b71df2b.css rel=prefetch>

<link href=/mvue/css/group-portal.846ae1f7.css rel=prefetch>

<link href=/mvue/js/chunk-029a266b.f7ef4a5e.js rel=prefetch>

<link href=/mvue/js/chunk-0e19dd50.a4a3fb7b.js rel=prefetch>

<link href=/mvue/js/chunk-32fbd092.d215351e.js rel=prefetch>

<link href=/mvue/js/chunk-4fe24ae8.44626d02.js rel=prefetch>

<link href=/mvue/js/chunk-555e9cec.32e5e3df.js rel=prefetch>

<link href=/mvue/js/chunk-fdf08432.bf5a8420.js rel=prefetch>

<link href=/mvue/js/group-portal.c513f391.js rel=prefetch>

<link href=/mvue/css/app.15268106.css rel=preload as=style>

<link href=/mvue/css/chunk-vendors.4cb091d7.css rel=preload as=style>

<link href=/mvue/js/app.bb879746.js rel=preload as=script>

<link href=/mvue/js/chunk-vendors.099adcdc.js rel=preload as=script>

<link href=/mvue/js/index.a9a2084a.js rel=preload as=script>

<link href=/mvue/css/chunk-vendors.4cb091d7.css rel=stylesheet>

<link href=/mvue/css/app.15268106.css rel=stylesheet>

</head>

<body><noscript><strong>We're sorry but x7-manage doesn't work properly without JavaScript enabled. Please enable it to

continue.</strong></noscript>

<div id=app></div>

<script src=/mvue/js/chunk-vendors.099adcdc.js> </script> <script src=/mvue/js/index.a9a2084a.js> </script> <script

src=/mvue/js/app.bb879746.js> </script> </body> </html>

留神这点,咱们应该就晓得了,所以咱们新建一个 /mvue 目录,而后把生成的 /dist 文件全副复制到 /mvue 外面,目录构造如下所示:

这样就实现了 vue 我的项目的编译工作

配置 nginx

根目录下创立 /nginx 目录,并新增 nginx.conf 文件,如下所示:


user root;

worker_processes 1;

error_log /var/log/nginx/error.log warn;

pid /var/run/nginx.pid;

events {worker_connections 1024;}

http {

include mime.types;

default_type application/octet-stream;

log_format main '$remote_addr - $remote_user [$time_local]"$request"''$status $body_bytes_sent "$http_referer" ''"$http_user_agent""$http_x_forwarded_for"';

access_log /var/log/nginx/access.log main;

sendfile on;

keepalive_timeout 65;

server {

listen 80;

server_name localhost;

location / {

root /usr/share/nginx/html;

index index.html;

}

location /mvue {

root /usr/share/nginx/html;

index index.html;

try_files $uri $uri/ /mvue/index.html;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {root /usr/share/nginx/html;}

}

}

其中,留神 location / 和 location /mvue 的写法,因为咱们创立了 /mvue 目录,因而,咱们在 location /mvue 中指定了 index.html 的绝对路径:

try_files $uri $uri/ /mvue/index.html;

这样就实现了 nginx.conf 的配置

docker 运行 vue 我的项目

下面的两步操作:

1、生成 /dist(蕴含 /mvue) 目录,
2、配置 nginx.conf 都曾经实现了,接下来咱们就应用 docker 来运行,如下所示:

docker run --name eip-manage -p 80:80 -v $PWD/dist:/usr/share/nginx/html:rw -v $PWD/nginx/nginx.conf:/etc/nginx/nginx.conf -v $PWD/nginx/logs:/var/log/nginx -d nginx

点击回车即可生成一个 container,而后咱们能够浏览器中胜利预览,至此就实现了全副工作。

总结

1、当然你能够应用 docker 来生成镜像来运行也是能够的,不过每次都生成镜像浪费时间,应用这种形式在不装置 nginx 的状况下运行 vue 我的项目,十分不便,极力推荐给大家

2、因为 vue.config.js 应用了 publicPath: ‘/mvue’, 所以要本人在 dist 中创立一个这个目录,否则应用 docker run 运行起来就会报 404 或 500 的错,这个千万留神

援用

vue-docker-nginx

nginx 中部署多 vue 我的项目

正文完
 0