ubuntu 安装nginx并部署vue项目

ubuntu使用nginx部署vue项目

1.安装nginx

1.更新源列表

apt-get update

2.安装nginx

apt-get install nginx

3.检查nginx是否安装，输入如下命令后若出现版本号则安装成功

nginx -v

4.若是直接启动

server nginx restart

5.若是开机自启动

首先 我们需要在 /etc/init.d/目录下创建一个nginx的脚本文件，命令 vi nginx 输入以下内容

#! /bin/sh
# Author: rui ding
# Modified: Geoffrey Grosenbach http://topfunky.com
# Modified: Clement NEDELCU
# Reproduced with express authorization from its contributors
set -e
PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
DESC="nginx daemon"
NAME=nginx
DAEMON=/usr/local/nginx/sbin/$NAME
SCRIPTNAME=/etc/init.d/$NAME


# If the daemon file is not found, terminate the script.
test -x $DAEMON || exit 0

d_start() {
  $DAEMON || echo -n " already running"
}

d_stop() {
  $DAEMON –s quit || echo -n " not running"
}

d_reload() {
  $DAEMON –s reload || echo -n " could not reload"
}

case "$1" in
  start)
    echo -n "Starting $DESC: $NAME"
    d_start
    echo "."
  ;;
  stop)
    echo -n "Stopping $DESC: $NAME"
    d_stop
    echo "."
  ;;
  reload)
    echo -n "Reloading $DESC configuration..."
    d_reload
    echo "reloaded."
  ;;
  restart)
  echo -n "Restarting $DESC: $NAME"
  d_stop
# Sleep for two seconds before starting again, this should give the
# Nginx daemon some time to perform a graceful stop.
  sleep 2
  d_start
  echo "."
  ;;
  *)
  echo "Usage: $SCRIPTNAME {start|stop|restart|reload}" >&2
  exit 3
  ;;
esac
exit 0

然后输入 以下命令

update-rc.d –f nginx defaults

好了 从新启动看看NGINX启动了没

如果要取消开机启动可以这样

update-rc.d -f nginx remove

6.在浏览器输入ip地址，若出现如下页面则启动成功

2.打包上传vue项目到服务器

1. 打包
   我的项目使用的是vs code，在终端输入如下命令进行打包

npm run build

2. 上传
   打包完成后会有dist文件，该文件为打包完成后的项目,该文件中有index.html和static两个内容。
   将该dist文件上传到服务器的某个位置即可
   我上传到/home/web文件中

3.配置nginx

安装nginx后，nginx的默认目录是/etc/nginx，在http模块中加入如下内容,表示配置文件要引用hosts文件夹下的host后缀的文件。该host后缀文件就是用来配置vue项目的，一个host文件配置一个vue项目

1. 修改nginx.conf ，使用vim打开该文件，输入如下命令

include /etc/nginx/hosts/*.host;

2. 修改后

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

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;

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

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # 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_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/*;
	include /etc/nginx/hosts/*.host;#新添加的一行
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
# 
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
# 
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
# 
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

3. 创建*.host文件
   在/etc/nginx中创建hosts文件夹

mkdir hosts

在host文件中创建zhou_web.host文件，文件名随便命名
在文件中添加如下内容

server {
        listen       8080;#自己设置端口号
        server_name  ***.***.**;#ip地址或域名
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/web/zhou_web;#这里写vue项目的所在地址
            index  index.html;#这里是vue项目的首页，需要保证dist中有index.html文件
        }

        error_page   500 502 503 504  /50x.html;#错误页面
    
       
    }

4. 重启nginx

nginx -s reload

访问vue项目

ip:port即可进行访问

常见问题

浏览器访问时显示403
这个问题有多种原因，我当时遇到的原因是该项目所在的文件没有权限访问。我的项目所在文件是/home/ububtu/dist
使用如下命令保证可以访问(比较暴力qaq)

chmod -R 777 home
chmod -R 777 web
chmod -R 777 zhou_web

原文链接：
自启动nginx: https://www.cnblogs.com/lexus/archive/2010/12/21/1913109.html
nginx部署vue: https://blog.csdn.net/qq_43589143/article/details/123017842