使用nginx部署vue-cli项目

使用nginx部署vue-cli项目


本文介绍两种部署方法,一种是直接在物理机上部署,另一种是通过docker部署

ubuntu16.04使用nginx部署vue-cli

1. 安装nginx
sudo apt-get install nginx
这样安装nginx后,配置文件的位置在/etc/nginx/nginx.conf

2.打包vue-cli项目
npm run build
(这里看到网上说要修改一些配置,不然打包好后会有路径错误,但是我完全没有问题)
build好后再vue-cli项目文件夹下会出现一个dist文件夹

3.把dist文件夹里的东西放入nginx服务器目录下
我把static/index.html放在了nginx的默认服务目录下/usr/share/nginx/html
当然你也可以放在其他地方,只不过需要在配置文件中做相应修改

记一个坑,,我的服务器用的是腾讯云,然后想用scp来上传文件,但是传不上去,以为是权限的问题,然后在/usr/share/nginxsudo chmod 777 -R *,还是没用,最后用了WinSCP就可以了

4.修改nginx配置文件
配置文件在/etc/nginx/nginx.conf,改成下面这样

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    server {
        # 你想监听的端口
        listen 80 default_server;
        listen [::]:80 default_server;
        # 如果你把dist放在了其他目录下,那么这里就要改成那个目录
        root /usr/share/nginx/html;
        # server_name是你网站的域名,如果没有域名就写ip
        server_name 1.2.3.4;

        index index.html;
        location / {
            try_files $uri $uri/ @rewrites;
        }

        location @rewrites {
            rewrite ^(.+)$ /index.html last;
        }

        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            expires max;
            add_header Pragma public;
            add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        }
    }

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    #include /etc/nginx/sites-enabled/*;

}

5.重启nginx
不出意外的话service nginx restart就能通过http://域名(ip):端口来访问了

使用docker的nginx镜像来部署

这是另一种比较通用的部署方法
之前想用docker的ubuntu镜像,在容器里安装nginx的时候出现了莫名其妙的问题,所以直接用nginx镜像
1.准备文件
npm run build得到的dist
nginx.conf
随便找个地方新建一个目录把distnginx.conf放进去
我放在E:\docker\ordering

2.docker下载nginx镜像
docker pull nginx

3.运行一个容器
docker run --name=ordering -p 8080:8999 -v e:/docker/ordering/dist:/usr/share/nginx/html -v e:/docker/ordering/nginx.conf:/etc/nginx/nginx.conf nginx
解释一下参数的意思,
--name=ordering是这个容器的名字
-p 8080:8999是把宿主机的8080端口映射到容器的8999端口
-v e:/docker/ordering/dist:/usr/share/nginx/html是把宿主机上的e:/docker/ordering/dist目录挂载到容器里的/usr/share/nginx/html目录
nginx表示使用nginx镜像

注意:命令里面路径名都要小写,否则识别不出
另外有一篇很棒的介绍docker的文章

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值