如何使用docker文件在nginx中加载css?

ipakzgxi  于 2023-08-03  发布在  Nginx
关注(0)|答案(2)|浏览(164)

我刚开始写应用程序和使用nginx,我正在为我朋友的生日做一个应用程序。这是我的文件夹结构

nginx-app
 ┣ Dockerfile
 ┣ pic.jpg
 ┣ style.css
 ┣ index.html

字符串
尝试引用:
docker nginx not loading css styles
但对我不起作用。当我使用live server时,它按预期工作,但当我尝试使用docker image将其容器化时,它开始失败。Css不加载有人能帮我吗?
停靠文件

FROM nginx
COPY index.html /usr/share/nginx/html
WORKDIR /app
COPY . .
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]


这是我的实时服务器

中的情况
这是它在部署后在我的docker镜像中的样子



检查时出错



为什么这个应用程序不加载CSS?有人能帮帮我吗

jaql4c8m

jaql4c8m1#

默认的Docker Nginx配置只查找/usr/share/nginx/html中的文件。你复制了index.html,然后将站点的其余部分复制到Nginx不知道的另一个目录/app中。
最简单的更改是将整个应用程序COPY到标准目录中

FROM nginx
COPY ./ /usr/share/nginx/html/

字符串
如果您混合了HTML内容和应用程序源代码,则可能需要更明确地将特定文件或扩展名复制到目录中。
请注意,此设置不需要EXPOSECMD线路;这些包含在基本nginx映像中,您的映像将继承这些映像。

hrysbysz

hrysbysz2#

我使用了下面的参考
Deploy html app using nginx
从这一点我可以理解,我必须使用nginx.conf文件。
我使用的nginx.conf文件

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/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;
    server {
        listen 80;
         
         location = /status {
             access_log off;
             default_type text/plain;
             add_header Content-Type text/plain;
             return 200 "alive";
        }
        
         location / {
            gzip off;
            root /usr/share/nginx/html/;
            index  index.html;
        }
        
        location ~* \.(js|jpg|png|css)$ {
            root /usr/share/nginx/html/;
        }
    } 
    sendfile        on;
    keepalive_timeout  65;
}

字符串
我使用的Dockerfile

FROM nginx
COPY ./nginx.conf /etc/nginx/nginx.conf

COPY *.html /usr/share/nginx/html/
COPY *.css /usr/share/nginx/html/
COPY *.jpg /usr/share/nginx/html/

WORKDIR /app
COPY . .
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

相关问题